具有不透明度的 jQuery 动画答案

【问题标题】：jQuery animate with opacity具有不透明度的 jQuery 动画
【发布时间】：2012-12-26 09:40:02
【问题描述】：

我刚刚用不透明度编写了 jquery animate，并且在不透明度为 0.5 的情况下从左到右的动画效果很好，但在动画中不能从左到右工作，但在淡入淡出时效果很好。

请看代码

$(window).load(function() {

  $('#apDiv1').animate({top:"640px"},3000);

  setTimeout(function(){

      $('#apDiv12').fadeIn(2000).animate({left:"340px"},3000);

      setTimeout(function(){
          $('#apDiv12').animate({left:"30px", opacity: 0},3000);
      }, 6300);

  }, 3300);

});

您可以看到第一行 #apDiv12 表示 .fadeIn，我想更改为 animate 但无法正常工作，我不明白为什么第二个 #apDiv12 正在使用 animate。

我的问题是在

$('#apDiv12').fadeIn(2000).animate({left:"340px"},3000);

我想使用 .animate 而不是 fadeIn，但不能在 animate 中工作，我想知道为什么！以及如何解决这个问题！

两个几乎相同的代码有什么不同！我该如何解决它以使用动画而不是 .fadeIn！

请帮忙谢谢。

上午

【问题讨论】：

fadeIn 是 animate 的简写，因此实际上您已经在两者上都使用了 animate，就在 fadeIn 的幕后...
这看起来可以正常工作：jsfiddle.net/Rykus0/Q9vng
问题可能是没有设置不透明度，所以动画是从opacity:1 到opacity:1。在我的小提琴中，我使用 CSS 设置它，但是如果你想要更好的浏览器支持，你可以使用 jquery 使用 fadeTo 或类似的东西来设置它。

标签： jquery jquery-animate slider opacity fadein

【解决方案1】：

我不确定我是否完全理解你的问题，但你不能做这样的事情来使用动画“淡入”元素：

$('#apDiv12').animate({opacity: 1}, 2000).animate({left:"340px"},3000);

【讨论】：

对不起，我想说的是，我如何在这行代码上用动画解决这个问题，而不是使用 .fadeIn！ $('#apDiv12').fadeIn(2000).animate({left:"340px"},3000);因为不能在动画中工作。