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的是這樣的：

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"); 
      }   
     }); 
    }); 
}); 

出於某種原因，點擊第三個導航按鈕始終工作正常，但點擊第二個總顯示默認文本，然後立即隱藏它，然後再次顯示它，單擊第一個導航按鈕有時可以正常工作，有時會顯示/隱藏/顯示跳舞。

我猜測這是jQuery認爲它已經完成了它的行動之前，它真的有一些事情，但也許它只是我的草率代碼！ :-)所有幫助將不勝感激！謝謝。

Answer 1

舞蹈是由隱藏回調引起的，每.slidetxt元素運行一次。

這可以通過使用jQuery.when(jQuery('.slidetxt').hide('slow').done(function(){...})克服，當所有隱藏完成後，它會運行一次回調。

您也可以利用Cycle的before和after選項，而不是將其他點擊處理程序附加到導航鏈接。

整個事情是一個相當光模到原來的代碼，看起來像這樣：

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