具有不透明度的 jQuery 动画

Posted 2023-05-08

【中文标题】具有不透明度的 jQuery 动画

【英文标题】：jQuery animate with opacity

【发布时间】：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 或类似的东西来设置它。

【参考方案1】：

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

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

【讨论】：

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