jQueryリピートダンスの表示/非表示

Question

私は、順序付けられていないリストを作成するページャを備えたjQueryサイクルを持っており、クリックするとスライドが変更されます。順序付けられていないリストを使用して、各スライドの関連テキストを表示/非表示にしようとしています。また、プロセスをさらに複雑にするために、スライドに関連するテキストがない場合のデフォルトのテキストセットがあります。

HTMLは次のようになります。

<div class="slideshow"> 
    <img src="img1.png" /> 
    <img src="img2.png" /> 
    <img src="img3.png" /> 
</div> 
<div class="slidetxt slide-3-text" style="display:none;">Text to appear with slide 3</div> 
<div class="slidetxt slide-1-text">Text to appear with slide 1</div> 
<div class="slidetxt defaultcontent" style="display:none;">This is the default text for the page.</div> 

jQueryのは次のようになります。第三のナビゲーションボタンをクリックすると、常に正常に動作しますが、常に秒1をクリックすると、いくつかの理由

jQuery(document).ready(function() { 
    jQuery('.slideshow') 
    .after('<ul id="slidenav" />') 
    .cycle({ 
     fx: 'fade', 
     timeout: 0, 
     pager: '#slidenav', 
     pagerAnchorBuilder: function(idx, slide) { 
      return '<li><a href="#"></a></li>'; 
     } 
    }); 
    jQuery('#slidenav li a').click(function(){ 
     var index = jQuery(this).parent('li').index(); 
     index = index + 1; 
     var slidetxt = ".slide-"+index+"-text"; 
     jQuery(".slidetxt").hide("slow", function(){ 
      if(jQuery(slidetxt).length){ 
       jQuery(slidetxt).show("slow"); 
      }else{ 
       jQuery(".defaultcontent").show("slow"); 
      }   
     }); 
    }); 
}); 

デフォルトのテキストを表示してすぐにそれを隠してからもう一度表示し、最初のナビゲーションボタンをクリックするとOKと表示され、時にはshow/hide/show danceが表示されることがあります。

jQueryが実際にそれを行う前にアクションを完了したと思っているのですが、それはちょっとしたコードです！ :-)すべてのヘルプは非常に高く評価されます！ありがとう。

Answer 1

ダンスは、.slidetxt要素ごとに1回実行されるhideコールバックによって引き起こされます。

これは、jQuery.when(jQuery('.slidetxt').hide('slow').done(function(){...})を使用することによって克服できます。jQuery.when(jQuery('.slidetxt').hide('slow').done(function(){...})は、すべての非表示が完了したときにコールバックを1回実行します。

ナビゲーションリンクに追加のクリックハンドラーを接続するのではなく、Cycleのbeforeとafterのオプションを利用することもできます。

全体のことは、あなたの元のコードにかなり軽いMODで、次のようになります。

jQuery(document).ready(function() { 
    $slidetxt = jQuery(".slidetxt"); 
    $defaultcontent = jQuery(".defaultcontent"); 
    jQuery('.slideshow').after('<ul id="slidenav" />').cycle({ 
     fx: 'fade', 
     timeout: 0, 
     pager: '#slidenav', 
     pagerAnchorBuilder: function(idx, slide) { 
      return '<li><a href="#">' + (idx + 1) + '</a></li>'; 
     }, 
     before: function() { 
      $slidetxt.hide("slow"); 
     }, 
     after: function(currSlideElement, nextSlideElement) { 
      var index = 1 + jQuery(nextSlideElement).index(); 
      var $s = jQuery(".slide-" + index + "-text"); 
      jQuery.when($slidetxt.hide("slow")).done(function() { 
       if ($s.length) { 
        $s.show("slow"); 
       } 
       else { 
        $defaultcontent.show("slow"); 
       } 
      }); 
     } 
    }); 
}); 

はfiddle