Jquery Div向下滑动并弹出动画效果

Question

我尝试将两种jquery显示效果结合起来:弹跳和滑动。

我的原始幻灯片动画如下所示：

$('#mydiv').slideDown( 100, function() {});

和弹跳动画

( "bounce", { times: 3 }, "slow" );

我想让div向下滑动，当你点击上传照片时，它会像Tumblr一样弹出来

Answer 1

你想要的东西很容易通过一个队列来完成……

<script>
$( "#show" ).click(function() {
  var n = jQuery.queue( $( "div" )[ 0 ], "fx" );
  $( "span" ).text( "Queue length is: " + n.length );
});

function runIt() {
  $( "div" )
    .show( "slow" )
    .animate({
      left: "+=200"
    }, 2000 )
    .slideToggle( 1000 )
    .slideToggle( "fast" )
    .animate({
      left: "-=200"
    }, 1500 )
    .hide( "slow" )
    .show( 1200 )
    .slideUp( "normal", runIt );
}

runIt();
</script>

像上面这样的东西...从下面的链接复制。

http://api.jquery.com/jquery.queue/