如何更改添加不透明度到 jquery 中的动画函数
我有以下代码,是从 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 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
它应该可以将动画属性更改为“不透明度”:
It should work to change the property being animated to "opacity":
我不是 jquery 专家,但你可以简单地将 .animate 替换为 .fadeIn("slow")
Im no jquery expert, but could you simply replace, .animate with .fadeIn("slow")