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

发布于 2024-10-09 15:14:47 字数 1966 浏览 5 评论 0原文

我有以下代码,是从 http://css-tricks.com/startstop-slider/< 获得的/a> 我想将动画属性从 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");
  }

 });

});

I have the following code which I got from http://css-tricks.com/startstop-slider/ I would like to switch the animate property from a top animate on the img to just a opacity fade in fade out. How would I go about doing so with the following code.

// 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");
  }

 });

});

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

生生不灭 2024-10-16 15:14:47

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

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

It should work to change the property being animated to "opacity":

$(".slide img").animate({
    "opacity": 1
},
我们只是彼此的过ke 2024-10-16 15:14:47

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

Im no jquery expert, but could you simply replace, .animate with .fadeIn("slow")

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文