使用Jquery UI动画功能显示/隐藏子元素时，父div在没有动画的情况下变得更宽

Question

我有一个问题，当我尝试使用jquery动画显示/隐藏div元素时，它平滑打开，但是其父对象却不平滑地打开。 隐藏也会发生同样的情况。

因此，我的整个页面内容都是一个混蛋。

演示： http ： //jsfiddle.net/neDZP/7/

HTML：

<div id="A_to_Z_top">     
    <div class="section clearfix">
        <div class="region region-a-to-z-top">
            <div class="block block-block contextual-links-region" id="block-block-48">
                <h2>INDEX A-Z</h2>
                <div class="content" style="display: block;">
                    <div id="atozSlide">
                        <ul>
                            <li><a href="#">A</a></li>
                            <li><a href="#">B</a></li>
                            <li><a href="#">C</a></li>
                            <li><a href="#">D</a></li>
                            <li><a href="#">E</a></li>
                            <li><a href="#">E</a></li>
                            <li><a href="#">F</a></li>
                            <li><a href="#">G</a></li>
                            <li><a href="#">H</a></li>
                            <li><a href="#">I</a></li>
                            <li><a href="#">J</a></li>
                            <li><a href="#">K</a></li>
                            <li><a href="#">L</a></li>
                            <li><a href="#">M</a></li>
                            <li><a href="#">O</a></li>
                            <li><a href="#">P</a></li>
                            <li><a href="#">Q</a></li>
                            <li><a href="#">R</a></li>
                            <li><a href="#">S</a></li>
                            <li><a href="#">T</a></li>
                            <li><a href="#">U</a></li>
                            <li><a href="#">V</a></li>
                            <li><a href="#">W</a></li>
                            <li><a href="#">X</a></li>
                            <li><a href="#">Y</a></li>
                            <li><a href="#">Z</a></li>
                        </ul>
                    </div>  
                </div>
            </div>
        </div>
    </div>
</div>
<P> This paragraph should be slide down smothly <p>

使用Javascript：

$(function() {
  // slide effect for showing and hiding A-Z header block    
  $('#block-block-48 > .content').hide();
  $('#block-block-48 h2').click(function(){ 
      var effect = 'slide';
      var options = { direction: 'up' };
      var duration = 300;
      $("#block-block-48 > .content").stop().toggle(effect, options, duration);
  });
});

CSS：

#block-block-48 {
  background: none repeat scroll 0 0 #ff0000;
}

#block-block-48 h2 {
   background:  #035d8e;
   color: #ffffff;
   cursor: pointer;
   font-family: sans-serif;
   font-size: 16px;
   margin: 0;
   padding: 6px 15px 6px 0;
   text-align: right;
   text-decoration: none;
}

#block-block-48 .content {
    margin: 0;
    text-align: right;
}

#block-block-48 ul li {
    display: inline-block;
    float: left;
    list-style: none outside none;
    margin: 0 0 0 2px;
}

#block-block-48 ul li a {
    background: none repeat scroll 0 0 #035d8e;
    color: #ffffff;
    display: block;
    float: left;
    font-family: sans-serif;
    font-size: 16px;
    margin: 0;
    padding: 0 8px;
}

#block-block-48 ul {
    display: inline-block;
    margin: 5px 0 0;
    padding: 0;
}

Answer 1

首先，使用display:block离开div.content 。

然后将以下内容添加到CSS：

 #block-block-48 > .content {
     display:none;
 }

之后，将JS更改为以下内容：

$(function() {
    // slide effect for showing and hiding A-Z header block  
     $('#block-block-48 h2').click(function(){ 
         $(this).next().slideToggle();
     });
});

那应该解决它！

让我知道这是否是您想要的动画。 如果没有，我可以建议其他事情。

小提琴供参考

Answer 2

更改jQuery函数的最简单方法。 而不是浪费时间在CSS上。

将此行更改为

 $("#block-block-48 > .content").stop().toggle(effect, options, duration);

这条线

$("#block-block-48 > .content").slideToggle();

的jsfiddle

Answer 3

使用slideToggle http://jsfiddle.net/akash4pj/neDZP/14/

JS

$(function() {
    // slide effect for showing and hiding A-Z header block    
    $('#block-block-48 > .content').hide();
    $('#block-block-48 h2').click(function(){ 
        var options = { direction: 'up' };
        var duration = 300;
        $("#block-block-48 > .content").stop().slideToggle( options, duration);
    });
  });

Answer 4

这是正常工作的jsfiddle ，如下修改css：

#block-block-48 {
}
#block-block-48 .content {
    margin: 0;
    text-align: right;
    background: none repeat scroll 0 0 #ff0000;
}

由于您的幻灯片元素是#block-block-48 .content ，但是背景颜色设置为#block-block-48

Answer 5

请在您的函数中使用它。

 $(function() {
    // slide effect for showing and hiding A-Z header block    
    $('#block-block-48 > .content').hide();
    $('#block-block-48 h2').click(function(){ 

   $("#abovediv").toggle("slow");
    });

  });

ID“ abovediv”用于以下标记。

<h2>INDEX A-Z</h2>
<div id = "abovediv" class="content" style="display: block;">
<div id="atozSlide">

Answer 6

试试这个代码：

<script>
$(function() {
  $('#block-block-48 > .content').hide();
  $('#block-block-48 h2').click(function(){ 
    var _header = $(this);
    var _content = _header.next();
    if(_content.is(':visible'))
    {
      _content.slideUp();
    }
    else
    {
      _content.slideDown();
     }
   });
 });
</script>