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更改圖像與褪色翻轉

回答

相關問題