jQuery слайдер вверх и вниз

Question

У меня возникли проблемы с функцией jQuery slidedown и slideUp. При нажатии кнопки div наклоняется вниз, чтобы показать больше контента - однако, когда он скользит вниз, он идет на полпути вниз, а затем он любит заикаться, но когда я нажимаю меньше информации, чтобы вернуть div, он идет плавно. Как я могу убедиться, что он плавно скользит без перерывов в переходе?

<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 Coding

<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> 

Answer 1

проблема заключается в производительности - браузеры могут погрязнуть при попытке анимировать несколько элементов, в то время, особенно если эти элементы заставляют документ «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"); 
    } 
); 

Таким образом, браузер только анимировать один элемент в то время, - намного быстрее!

Answer 2

Не уверен, что, если решение вашей проблемы, но только для хорошей практики, хранить выбранные переменные и использовать их вместо того, чтобы, таким образом 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>