Question

我正在尝试使用.animate和setInterval函数构建jquery，如下所示。

$(document).ready(function(){
$("#animate1").animate({'margin-left':'150px','margin-bottom':'50px'},2000)
  },300);
    });

此动画将图像从下向左移动。如果我想仅在此动画期间显示图像而不在此动画后显示，那么我该怎样才能把它放进去？我的html如下

<div> <div id="animate1"><img src="img/chotu.png" style="height:200px; width:200px;"/> </div></div>

Answer 1

为什么你不能简单地将这些行为联系起来：淡入，动画，淡出？

以下是一个示例：https://jsfiddle.net/45ky6pgw/3/

HTML：

<div id="outer">
  <div id="animate1">
    <img src="http://cliparts.co/cliparts/riL/xdz/riLxdzRoT.jpg"/>
  </div>
</div>

CSS：

#outer {
  position: relative;
  border: 2px solid green;
  width: 300px;
  height: 300px;
}
#animate1 {
  position: absolute;
  display: none;
  bottom: 0;
  left: 100px;
  vertical-align: bottom;
}
#animate1 img {
  width: 100px;
  height: 100px;
}

JS：

$(document).ready(function() {
  setTimeout(function(){
    $("#animate1")
      .fadeIn('slow')
      .animate({'margin-left':'50px','margin-bottom':'50px'},2000)
      .fadeOut('slow');
  }, 2000)
});

您可以在JS代码中看到三种方法fadeIn()，animate()和fadeOut()的“链接”。

Answer 2

我正在寻找这个...... !!

$(document).ready(function(){ 
    setInterval(function(){ 
   $("#animate1").fadeIn('slow').animate({'margin-left':'150px','margin-bottom':'50px'},2000).fadeOut();
   $("#animate1").fadeIn('slow').animate({'margin-bottom':'0px','margin-left':'-150px'},2000).fadeOut();
  },300);
    });

并且在fisrt .fadeOut（）函数之后我想改变我的背景图像不透明度.. !!

Answer 3

这是不可能的，因为你的背景div类或div id应该是相同的，或者你可以用jquery链接来做。但是jquery链接逐个播放动画。所以，您也可以使用CSS转换或动画来完成它。

如何在jquery中的.animate（）函数之间加载图像？

3 个答案: