如何切换 div 高度以使其看起来好像在向下滑动？

Question

请看这个fiddle我已经开始了。 http://jsfiddle.net/rabelais/6bt70uhj/1/

$('#name-a').click(function() {
$('#bio-line-1').animate({width: 'toggle'});
$('#bio-line-2').animate({height: 'toggle'});
});

当您单击 link 时，第一句话从左侧滑入，第二行从第一行滑入。这与我想要实现的目标非常接近，但是我需要第二条线看起来更像是作为一个整体对象在滑动，而不是看起来像是在显露。

我已经尝试过使用 .SlideDown 但这产生了与 .animate 相同的效果。

有什么想法吗？谢谢

Answer 1

使用此代码：-

css:

#bio-line-2 {
left: 120px;
position: fixed;
top: 20px;
width: 433px;
z-index: 1;
margin-top:20px;

}

Jquery

$('#name-a').click(function() {
$('#bio-line-1').animate({width: 'toggle'});
$('#bio-line-2').animate({marginTop: 'toggle'});
});

Answer 2

可以试试这个，如果我正确理解你的问题

$('#name-a').click(function() {
    $('#bio-line-1').animate({width: 'toggle'});
    window.setTimeout(function (){$('#bio-line-2').slideToggle( "slow" ); }, 300);
  });

Answer 3

如果你想让整条线作为一个对象滑动，它不是你想要切换的高度，而是相对于它应该滑动的元素的位置。如果您只是正确地偏移元素然后使用：

，您的代码就可以工作

 $('#bio-line-2').animate({marginTop: 'toggle'});

正如 Dipesh 提到的那样。

如果你想确保第一行从左边飞进来之前动画不开始，你可以传入一个函数在第一个动画结束后执行，像这样：

$('#bio-line-1').animate({width: 'toggle'},function(){ 

  $('#bio-line-2').animate({marginTop: 'toggle'});

});

这确保第二个动画等待第一个动画完成。

如何切换 div 高度以使其看起来好像在向下滑动？

How do I Toggle a divs height to make it appear as if it is sliding down?

jquery

css

jquery-animate

toggle