jquery更改图像与褪色翻转

我目前使用下面的脚本来更改翻转图像。有许多图像需要应用此效果 - 每个图像都有自己的翻转图像。该脚本适用于翻滚，但不适用于褪色。jquery更改图像与褪色翻转

我读过有关使用CSS和jQuery的淡入淡出效果：http://jqueryfordesigners.com/image-cross-fade-transition/

但是，这将是具有写CSS的超过100种不同的图像一个真正的痛苦！我只是想知道如果有人知道我做错了什么，以及如何使脚本工作？ :)

$(function() { 
$("img.rollover").hover(function() { 
    this.src = this.src.replace("_off", "_on") 
}, function() { 
    this.src = this.src.replace("_on", "_off") 
}) 
}); 


$("a img").hover(function() { 
    jQuery(this).stop().fadeTo("fast", 0.5); 
}, function() { 
    jQuery(this).stop().fadeTo("fast", 1); 
});

来源

2011-10-31 Jess

对于它的价值，它看起来不错。 – Craig

如果您还可以提供您的HTML样本（至少两个，如果您想要替换和淡入淡出的图像），这将有所帮助。 – Blazemonger

也许在替换src悬停事件之前发生淡入淡出事件？为什么你使用2个不同的CSS选择器？也许尝试使用相同的选择器（例如“img.rollover”）来分配这两个事件？或者你可以在同一个悬停事件定义中做所有事情吗？ – Upgradingdave

而不是写超过100种不同的图像的CSS，为什么不使用一个jQuery .each循环添加CSS的吗？

$("img.rollover").each(function() { 
    this.css('background-image',this.src.replace("_off", "_on")); 
});

...然后按照the page you linked to的单幅图像技术。

来源

2011-10-31 13:45:50 Blazemonger

jquery更改图像与褪色翻转

回答

相关问题