开发者

jQuery SlideDown and Float issuse

I'm having an issue with jQuery slideDown when the contents of the object I'm sliding down is floated.

What happens is that that the div slides down WAY past the height of the contents, and then 'snaps' to the proper height.

I think (merely a theory开发者_如何学编程) that the div is sliding down based on the height it would be if the contents inside weren't floated. For instance, if I have 4 floated items, the div seems to expand twice as far than when I have 2 floated items within.

No amount of containing the floats with clearfix hacks seems to fix anything.

The solution I've used in the past (and one that is recommended) is to set the height of item via CSS BEFORE hiding it. That way, slidedown knows how far to go.

The catch is that I'm nesting panels that use slide down. I can't set the height of the parent before hand as it would be calculated based on the nested hidden panels being expanded already.

I could recursively call that function that sets up all my toggle panels...find the innermost nested ones, set the height, collapse the ones I want hidden by default, and then move my way up the hierarchy. But that'd be a performance hit having to traverse so much.

Anyone know of a way to fix this slideDown of floated content without fixing the height via CSS before hand without having to traverse the dom setting heights manually first?

UPDATE:

sample code is here:

http://jsbin.com/ajoka/10/

(click the page to see it sliding)

This is based on the exact styles I am using and in that particular combination, you'll see the issue. Note the DIV being set to slideDown has a pink background. It will slide down FURTHER than its contents and then quickly snap back into the proper place.


I can't reproduce the problem. Please provide some code. This works as expected:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en-us" xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Test</title>
  <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
  <script src="assets/js/jquery-1.4.1.min.js" type="text/javascript"></script>
  <script src="assets/js/application.js" type="text/javascript"></script>
</head>
<body>
  <div id="test">
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
  </div>
</body>
</html>

CSS

#test div { width: 200px; height: 200px; float: left; outline: 1px solid #000; }

JS

$(function(){
  $('#test').hide();
  $(window).click(function(){
    $('#test').slideDown();
  });
});


solved:

remove margin-bottom:10px; from your

  .itemsWrapper {
    margin-bottom:10px;
    overflow:auto;
    width:100%;
    background: green;
  }

http://jsbin.com/ajoka/11


I just came across the same issue, and while reading this post suddenly remembered I already had this issue years ago.

Here's a solution that, though not optimal, gets the job done for most situations.

Add padding-bottom: 1px; to your wrapper. In my case, the wrapper is the parent to the animated div.

Hope that helps.


I was also facing the same issue. Two files having same HTML code but one of it was showing this issue. As a solution I calculated the height of the div which was sliding with jQuery:

var somevar=$('#contentBody').outerHeight();

Then I stored it in a variable, and again applied it that div before applying the slideDown effect:

$('#contentBody').height(somevar);

This trick solved the issue.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜