发表新帖
发表新帖

jQuery slideToggle jumps around

前端 未结
关注
18 1292
迷失自我
迷失自我 2020-12-16 18:13

I\'m using the jQuery slideToggle function on a site to reveal \'more information\' about something. When I trigger the slide, the content is gradually revealed, but is loc

相关标签:
18条回答
  • [愿得一人]
    2020-12-16 18:59

    This is an old one but similar problems still exist, below a working solution with a couple more requirements.

    http://jsfiddle.net/bfnGu/7/

    0 讨论(0)
  • 萌比男神i
    2020-12-16 19:00

    Accidentally I think that the easiest to use solution is to add custom function to jQuery with animate padding/margin-top/bottom too.

    //this function is to avoid slideToggle jQuery jump bug.
$.fn.slideShow = function(time,easing) { return $(this).animate({height:'show','margin-top':'show','margin-bottom':'show','padding-top':'show','padding-bottom':'show',opacity:1},time,easing); }
$.fn.slideHide = function(time,easing) {return $(this).animate({height:'hide','margin-top':'hide','margin-bottom':'hide','padding-top':'hide','padding-bottom':'hide',opacity:0},time,easing);  }

    And useage example:

    $(this).slideShow(320,'easeOutQuart');
$(this).slideHide(320,'easeOutQuart');

    My example animated opacity toggle tu, you can modify it as you need.

    0 讨论(0)
  • 被撕碎了的回忆
    2020-12-16 19:01

    you can use a structure like this one:

    <div class="details">
    <div class="hidden"> [your toggled info] </div>
</div>

    and in your css

    .details{
    position:relative;
}
.hidden{
    display:none;
}

    i think thats it.

    your jquery call must be:

    $('.hidden').slideToggle("slow");
    0 讨论(0)
  • 迷失自我
    2020-12-16 19:01

    Just to share a solution that worked for me.

    I am using a responsive layout for a site I am working on and essentially using slidetoggle on one of my columns in my layout, the only solution that worked above was setting a fixed width to my content - however as the column widths are dynamic this is not a solution for me.

    Wrapping the content I wanted to toggle in an extra <div> and then using slide toggle on the new div seemed to do the trick. Try adding position:relative to original element you were trying to slidetoggle.

    Yes, this does add horrible unnecessary markup but it's the only way I could get it to work.

    0 讨论(0)
  • 感动是毒
    2020-12-16 19:03

    I had this exact same problem but only when the hidden element was a <div>. I tried everything on this page but the only thing that worked was using overflow:hidden;.

    But the problem with using overflow:hidden; is that the upper & lower spacing created by the paragraph element was suddenly removed thereby making the layout ugly.

    I changed my hidden element from a <div> to a <p> and removed the overflow:hidden;... it worked without messing up the layout and the jumping problem did not return.

    EDIT:

    On a new site I was determined to use a hidden <div> and I discovered some things about this issue...

    1) When div contains p or ul or similar the jumping occurs.

    2) When the div only contains text, a links and/or images, no jumping animation.

    3) Removing all margins & padding from the elements within the hidden div clears up the issue. Other things like line-breaks can be added to compensate for the lack of padding & margins... not ideal but the animation is smooth again.

    0 讨论(0)
  • 野趣味
    2020-12-16 19:06

    Does your document contains any DOCTYPE declaration? Without it, some browser render the page in "quirck" mode which doesn't always lead to the result you are expecting..

    see here

    To make sure your page render as intended, add the following declaration to the top of the page (that is, before the html tag).

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    0 讨论(0)
 看不清?
提交回复
热议问题