Question

随着物品的上升，它逐渐淡出。然后该项目将再次返回并重新开始。
我想创建一个更连续的效果，其中对象在第一次上升后仍然是不可见的，然后是fadesIn（），然后重新开始。那可能吗？有没有更好的方法来写这个？

$(".item")
    .animate({"marginTop":"-100px",opacity:0}, 3000,'linear')
    .animate({"marginTop":"0px",opacity: 0.5}, 600, 'linear', runMyFunctionAgain);

Answer 1

这实际上没有并发计时器，所以你的方法足够了。查看此jsFiddle以获取我认为您想要的示例。如果网站存在问题，请输入以下代码：

<html>

<div class="item">Some Item Content</div>

js

var initAnime = (function StartAnimation(){
 $('.item').animate(
  {"marginTop":"-100px",opacity:0},
  3000,
  'linear',
  function(){
   $('.item').animate(
    {"marginTop":"0px"},
    600,
    'linear',
    function(){
     $('.item').animate(
      {opacity: 0.5}, 
      600, 
      'linear', 
      StartAnimation
     );
    }
   );
  }
 );
})();

我添加了额外的缩进，以便清楚它是什么，因为它有点链。希望它能让它更具可读性。

Answer 2

看看这个小提琴，看看这是不是你的想法：

http://jsfiddle.net/BvQDs/4/

HTML：

<div class="container">
    <div class="item"></div>
</div>
<div id="clickMe">
    <a href="#">Click Me!</a>
</div>

JavaScript的：

var animate = function(){
    $(".item").animate({"marginTop":"-100px",opacity:0}, 1000,'linear', function(){
        $(this).hide()
               .css({'marginTop':'0px', opacity:100})
               .fadeIn(1000, animate());
    });
};

$('#clickMe').on('click', function(){
    animate();
});

如何让我的jquery动画设置为不透明度0，因为它回来了？

2 个答案: