1

対応する番号の onclick 関数に従って、フェードインおよびフェードアウトしたい 6 つの画像があります。この関数は、1 ～ 6 の数字として表示されるスパンによってトリガーされます。

html:

<img id="prC1" class="swpr" src="Img/SW_prC1.jpg" height=360px width=520px >
<img id="prC2" class="swpr hidden" src="Img/SW_prC2.jpg" height=360px width=520px >    
<img id="prC3" class="swpr hidden" src="Img/SW_prC3.jpg" height=360px width=520px >    
<img id="prC4" class="swpr hidden" src="Img/SW_prC4.jpg" height=360px width=520px >    
<img id="prC5" class="swpr hidden" src="Img/SW_prC5.jpg" height=360px width=520px >    
<img id="prC6" class="swpr hidden" src="Img/SW_prC6.jpg" height=360px width=520px >   

<span id="loadswimage1">1</span>
<span id="loadswimage2">2</span>
<span id="loadswimage3">3</span>
<span id="loadswimage4">4</span>
<span id="loadswimage5">5</span>
<span id="loadswimage6">6</span>

CSS:

.hidden {
display:none; }

スクリプト：

$(function(){
$('#loadswimage1').click(function(){
    $('.swpr').fadeOut('slow', function() {
    $('#prC1').fadeIn('slow'); });  })  });

$(function(){
$('#loadswimage2').click(function(){
    $('.swpr').fadeOut('slow', function() {
    $('#prC2').fadeIn('slow'); });  })  });

$(function(){
$('#loadswimage3').click(function(){
    $('.swpr').fadeOut('slow', function() {
    $('#prC3').fadeIn('slow'); });  })  });

$(function(){
$('#loadswimage4').click(function(){
    $('.swpr').fadeOut('slow', function() {
    $('#prC4').fadeIn('slow'); });  })  });

$(function(){
$('#loadswimage5').click(function(){
    $('.swpr').fadeOut('slow', function() {
    $('#prC5').fadeIn('slow'); });  })  });

$(function(){
$('#loadswimage6').click(function(){
    $('.swpr').fadeOut('slow', function() {
    $('#prC6').fadeIn('slow'); });  })  });

ご覧のとおり、jquery に対する私の戦略は、クラスごとにすべての画像をフェードアウトしてから、コールバック関数を使用して目的の画像をフェードインすることです。

スクリプトを実装すると、画像は変化しますが、最初のフェードアウトの後、新しい画像がすぐに表示され、再びフェードインします。

私が望む主なことは、いつでも任意のスパン番号をクリックして、目的の新しい画像にフェードアウト/インできるようにすることです。

この小さな不具合はどこから来ているのでしょうか? ありがとうございました..

4

3 に答える 3

1

adeneo の解決策も正しいですが、要素の DOM 位置に依存しないため、私はこのアプローチを採用します。

HTML:

<div class="swpr">
    <img id="prC1" src="Img/SW_prC1.jpg" height="360" width="520" alt="1" />
    <img id="prC2" src="Img/SW_prC2.jpg" height="360" width="520" alt="2" />    
    <img id="prC3" src="Img/SW_prC3.jpg" height="360" width="520" alt="3" />    
    <img id="prC4" src="Img/SW_prC4.jpg" height="360" width="520" alt="4" />    
    <img id="prC5" src="Img/SW_prC5.jpg" height="360" width="520" alt="5" />    
    <img id="prC6" src="Img/SW_prC6.jpg" height="360" width="520" alt="6" />   
</div>

<span data-id="1">1</span>
<span data-id="2">2</span>
<span data-id="3">3</span>
<span data-id="4">4</span>
<span data-id="5">5</span>
<span data-id="6">6</span>

CSS:

.swpr img+img{ display:none; }

JS: 

$('span').click(function(){
    $('.swpr img').not(
        $('#prC'+$(this).data('id')).stop(true,true).fadeIn()
    ).stop(true,true).fadeOut();
});

デモ：

http://jsfiddle.net/EfA9w/

于 2013-08-25T21:36:39.980 に答える