Question

请看我已经开始的这个小提琴。 http://jsfiddle.net/rabelais/6bt70uhj/1/

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

单击链接时，第一个句子从左侧滑入，第二行从第一行开始。这与我想要实现的非常接近，但是我需要第二行看起来更像是作为整个对象滑动而不是看起来它被揭示。

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

有什么想法吗？谢谢

Answer 1

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

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

Answer 2

使用此代码： -

<强>的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 3

如果希望整行作为对象滑动，则不是要切换的高度，而是相对于应该滑动的元素的位置。如果您只是正确地偏移元素然后使用：

，那么您的代码将起作用

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

正如Dipesh所说。

如果你想确保在第一行从左边飞入之前动画没有开始，你可以在第一个动画结束后传入一个函数来执行，如下所示：

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

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

});

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

如何切换div高度使其看起来好像滑落？

3 个答案: