Question

我是jQuery的新手，我需要一些帮助来完成这个小代码。

<script type="text/javascript">
$(document).ready(function() {


   $('.cartoonsmart_right').animate({top: "-50"},500)(stop for few second and play another .animte).animate({top: "-400"},500, function() {$('.head_monkey1').removeClass("none")  .animate({left:"120"});});

 } );
 </script>

Answer 1

描述

您可以使用jQuery的.delay()方法。

jQuery.delay（）设置一个计时器，以延迟队列中后续项目的执行。

示例

$('.cartoonsmart_right').animate({top: "-50"},500).delay(2000).animate(...)

更多信息

jQUery.delay()

Answer 2

您可以使用.delay()，也可以使用函数回调链接，即：

$(".cartoonsmart_right").animate({top: "-50"}, 500, function() {
   $(".other_element").animate({ ... }, 1000, function() {
       $(".yet_another_element").animate({ ... }, 750, function() {
          ...
       });
   })
});

每个新函数在旧函数完成时调用。

Answer 3

使用jQuery delay()。文档：http://api.jquery.com/delay/

$(document).ready(function() {
    $('.cartoonsmart_right')
    .animate({top:"-50"}, 500)
    .delay(1000)
    .animate({top: "-400"}, 500, function() {
        $('.head_monkey1').removeClass("none").animate({left:"120"});
    });
});

由于您按绝对位置值移动元素，因此需要确保在其上设置以下CSS属性：

position: absolute;

没有它就行不通！

完整的工作演示：

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.cartoonsmart_right')
    .animate({top:"-50"}, 500)
    .delay(1000)
    .animate({top: "200"}, 500, function() {
            $('.head_monkey1').removeClass("none").animate({left:"120"});
    });
}); 
</script>
</head>
<body>
<p class="cartoonsmart_right" style="position:absolute">CartoonSmart</p>
<p class="head_monkey1 none" style="position:absolute">Headmonkey</p>
</body>
</html>

jQuery停止.animate几秒钟，并播放另一个动画

3 个答案:

描述

示例

更多信息