如何更改为 jquery 中的动画函数添加不透明度

Posted 2023-05-08

【中文标题】如何更改为 jquery 中的动画函数添加不透明度

【英文标题】：How do I change add a opacity to an animate function in jquery

【发布时间】：2011-05-30 17:32:21

【问题描述】：

我有以下从http://css-tricks.com/startstop-slider/ 获得的代码我想将动画属性从img 上的顶部动画切换为不透明的淡入淡出。我将如何使用以下代码执行此操作。

// SET THIS VARIABLE FOR DELAY, 1000 = 1 SECOND
var delayLength = 5000;

function doMove(panelWidth, tooFar) 
 var leftValue = $("#mover").css("left");

 // Fix for IE
 if (leftValue == "auto")  leftValue = 0; ;

 var movement = parseFloat(leftValue, 10) - panelWidth;

 if (movement == tooFar) 
  $(".slide img").animate(
   "top": -600
  , 1000, function() 
   $("#mover").animate(
    "left": 0
   , function() 
    $(".slide img").animate(
     "top": 40
    );
   );
  );
 
 else 
  $(".slide img").animate(
   "top": -600
  , 1000, function() 
   $("#mover").animate(
    "left": movement
   , function() 
    $(".slide img").animate(
     "top": 40
    );
   );
  );
 


$(function()

    var $slide1 = $("#slide-1");

 var panelWidth = $slide1.css("width");
 var panelPaddingLeft = $slide1.css("paddingLeft");
 var panelPaddingRight = $slide1.css("paddingRight");

 panelWidth = parseFloat(panelWidth, 10);
 panelPaddingLeft = parseFloat(panelPaddingLeft, 10);
 panelPaddingRight = parseFloat(panelPaddingRight, 10);

 panelWidth = panelWidth + panelPaddingLeft + panelPaddingRight;

 var numPanels = $(".slide").length;
 var tooFar = -(panelWidth * numPanels);
 var totalMoverwidth = numPanels * panelWidth;
 $("#mover").css("width", totalMoverwidth);

 $("#slider").append('<a href="#" id="slider-stopper">Stop</a>');

 sliderIntervalID = setInterval(function()
  doMove(panelWidth, tooFar);
 , delayLength);

 $("#slider-stopper").click(function()
  if ($(this).text() == "Stop") 
   clearInterval(sliderIntervalID);
    $(this).text("Start");
  
  else 
   sliderIntervalID = setInterval(function()
    doMove(panelWidth, tooFar);
   , delayLength);
    $(this).text("Stop");
  

 );

);

【参考方案1】：

应该可以将动画属性更改为“不透明度”：

$(".slide img").animate(
    "opacity": 1
,

【参考方案2】：

我不是 jquery 专家，但你能简单地将 .animate 替换为 .fadeIn("slow")

【讨论】：

这似乎不起作用，我可能实施错了。我会摆脱 "top": -600 部分吗？