jquery滑塊向上和向下

我遇到了jQuery slidedown和slideUp函數的問題。當點擊按鈕時，div滑動顯示更多內容 - 但是當它滑落時，它會順利地向下一半，然後它會喜歡口吃 - 但是當我點擊較少的信息以使備份達到平穩過渡時。我如何確保它在平滑過渡中不中斷地平滑下滑？jquery滑塊向上和向下

<script type="text/javascript"> 
    $(document).ready(function() { 
     // $(".image-gallery ul li:gt(5)").hide(0); 
     $(".inner p:gt(2)").hide(0); 

     $('a.moreInfoLink').toggle(
      function() { 
       $('.inner p:gt(2)').slideDown(1000); 
       $(this).text("Less info"); 
      }, 
      function() { 
       $('.inner p:gt(2)').slideUp(1000); 
       $(this).text("More info"); 
      } 
     ); 
    }); 
</script>

HTML/.NET編碼

<div class="slideContent"> 
    <div class="inner"> 
     <energy:TextPod ID="TextPod1" runat="server" CssClass="client-portfolio-intro" /> 
    </div> 
</div> 
<div class="clear-me"></div> 

<div class="btnMoreInfo"> 
    <a class="moreInfoLink" href="javascript:;">More Information</a> 
</div>

來源

2012-01-09 MJCoder

的問題是表現一個 - 試圖在同一時間以動畫的多個元素時，瀏覽器可以得到越陷越深，特別是當這些元素導致文檔爲'reflowed'。本質上，您的選擇器$('.inner p:gt(2)')正在使所有<p>元素獨立地進行動畫製作，並且每個元素都會在每個點處導致文檔重排。

爲了平穩過渡，請嘗試使用包含要顯示/隱藏的所有內容的單個動畫元素。我會用HTML類似：

<div class="slideContent"> 
    <div class="inner"> 
     <p>Something</p> 
     <p>Something</p> 
     <div class="fullInfo"> 
      <p>Something</p> 
      <p>Something</p> 
      <p>Something</p> 
     </div> 
    </div> 
</div> 

<div class="btnMoreInfo"> 
    <a class="moreInfoLink">More Information</a> 
</div>

和JS一樣：

$(".inner .fullInfo").hide(0); 

$('a.moreInfoLink').toggle(
    function() { 
     $('.inner .fullInfo').slideDown(1000); 
     $(this).text("Less info"); 
    }, 
    function() { 
     $('.inner .fullInfo').slideUp(1000); 
     $(this).text("More info"); 
    } 
);

這樣，瀏覽器一次只能一個動畫元素 - 快很多！

來源

2012-01-09 14:58:14 Beejamin

快得多 - 我需要重新組織它，工作得很好。我將元素存儲在一個變量中，並使用div.inner更快地加載它。使它更易於理解 – MJCoder 2012-01-09 15:24:46

不知道你的問題，但只是一個很好的實踐的解決方案，存儲您的選擇變量和用它們來代替，jQuery的這種方式不會需要找到元素，每次切換功能，正所謂：

<script type="text/javascript"> 
    $(document).ready(function() { 
     // $(".image-gallery ul li:gt(5)").hide(0); 
     var content = $('.inner p:gt(2)'); // storing selection 
     content.hide(0); 

     $('a.moreInfoLink').toggle(
      function() { 
       content.slideDown(1000); 
       $(this).text("Less info"); 
      }, 
      function() { 
       content.slideUp(1000); 
       $(this).text("More info"); 
      } 
     ); 
    }); 
</script>

來源

2012-01-09 14:55:32 Headshota

絕對是一個很好的補充。你應該儘量避免使用裸類選擇器，如果你可以幫助它$（'div.inner'）比$（'。inner'） – Beejamin 2012-01-09 14:59:08

jquery滑塊向上和向下

回答

相關問題