发表新帖
发表新帖

jQuery slide is jumpy

前端 未结
关注
27 1757
悲&欢浪女
悲&欢浪女 2020-12-07 16:52

I tried to slide in and out a DIV with the toggle function of jQuery but the result is always jumpy at the start and/or end of the animation. Here\'s the js code that I use:

相关标签:
27条回答
  • 梦毁少年i
    2020-12-07 17:16

    I found what works consistently is setting an invisible 1px border:

    border: 1px solid transparent;

    No need to fix the width or height or anything else and the animation doesn't jump. Hooray!

    0 讨论(0)
  • 你的背包
    2020-12-07 17:16

    I had the same issue, but not a single one of the proposed solutions worked for me, so I propose a solution that eliminates relying on slideToggle() altogether.

    Spark Notes: Load the page as normal, collect the height of each element you want to toggle, store that height in a special data attribute, and then collapse each element. Then it's as easy as changing the max-height between the value in the element's data-height attribute(expanded) and zero(collapsed). If you want to add extra padding and margins, etc to the elements, I recommend storing those in a separate CSS class to add and remove with the max-height property.

    Place the jQuery right after the elements you want to toggle and allow them to execute during page load (so you don't have to watch them all load and then collapse).

    HTML

    <ul id="foo">
   <li>
      <h2>Click Me 1</h2>
      <div class="bar">Content To Toggle Here 1</div>
   </li>
   <li>
      <h2>Click Me 2</h2>
      <div class="bar">Content To Toggle Here 2</div>
   </li>
</ul>

    CSS

    #foo>li>div.bar {transition: all 0.5s;
   overflow: hidden;}

    jQuery

    $('#foo h2').each(function(){
   var bar = $(this).siblings('.bar');
   bar.attr('data-height', bar.height()); //figure out the height first
   bar.css('max-height', '0px'); //then close vertically
});
$('#foo h2').click(function(){
   var bar = $(this).siblings('.bar');
   if ( bar .css('max-height') == '0px' ){ //if closed (then open)
      bar.css('max-height', bar.data('height') + 'px');
   } else { //must be open (so close)
      bar.css('max-height', '0px');
   }
});

    Here is a working JSFiddle: http://jsfiddle.net/baacke/9WtvU/

    0 讨论(0)
  • 鱼传尺愫
    2020-12-07 17:17

    Jerking happens when the parent div ".wrapper" in your case has padding.

    Padding goes on the child div, not the parent. jQuery is animating height not padding.

    Example: 

      <div class="notice">
     <p>Here's some text. And more text. <span id="link1">Test1</span></p>
     <div class="wrapper" style="padding: 0">
        <div id="note_1" style="padding: 20px">
           <p>Some content</p>
           <p>More blalba</p>
        </div>
     </div>
   </div>

    Hope this helps.

    0 讨论(0)
  • 小蘑菇
    2020-12-07 17:17

    I had the same problem with 'jerkyness' with divs inside my nav tag - my aim is to show an unordered list on hover of the div (if one exists). My lists are dynamically created so they do not have a fixed value.

    Heres the fix:

    $("nav div").hover(
  function() { // i.e. onmouseover function

    /****simple lines to fix a % based height to a px based height****/
    var h = jQuery(this).find("ul").height(); //find the height
    jQuery(this).find("ul").css("height", h); 
                         //set the css height value to this fixed value
    /*****************************************************************/

    jQuery(this).find("ul").slideDown("500");
  },
  function(){ // i.e. onmouseout function
    jQuery(this).find("ul").slideUp("500");
  });
});
    0 讨论(0)
  • 难免孤独
    2020-12-07 17:20

    You might try adding a doctype if you don't have one, it worked for me on IE8 after I found the suggestion here on SO: jQuery slideToggle jumps around. He suggests a strict DTD but I just used the doctype that google.com uses: <!doctype html> and it fixed my problem.

    0 讨论(0)
  • 再見小時候
    2020-12-07 17:21

    In my case I solved it adding style="white-space:nowrap;" to the element to prevent miscalculations on the jQuery function; no need to set a fixed width unless you need to wrap.

    0 讨论(0)
 看不清?
提交回复
热议问题