爲特定的img懸停腳本添加jquery淡入淡出效果

它可能很簡單，但我找不到解決方案。這是可能的（以一種簡單的方式！）添加一個jQuery的淡入和淡出效果這個圖像懸停sript？爲特定的img懸停腳本添加jquery淡入淡出效果

$('img[data-hover]').hover(function() { 
    $(this) 
     .attr('tmp', $(this).attr('src')) 
     .attr('src', $(this).attr('data-hover')) 
     .attr('data-hover', $(this).attr('tmp')) 
     .removeAttr('tmp'); 
}).each(function() { 
    $('<img />').attr('src', $(this).attr('data-hover')); 
}); 


<img src="image1.jpg" data-hover="image2.jpg">

來源

2013-12-20 Jan

有你看着.fadeToggle（） - http://api.jquery.com/fadeToggle/ – 97ldave

是的，但我真的不明白JS，這就是我的問題... – Jan

你可能想看看這個：

http://bavotasan.com/2009/creating-a-jquery-mouseover-fade-effect/

我想這是你想要的嗎？

$("img.a").hover(
    function() { 
     $(this).stop().animate({"opacity": "0"}, "slow"); 
    }, 
    function() { 
     $(this).stop().animate({"opacity": "1"}, "slow"); 
    }); 
});

HTML：

<img src="image1.jpg" alt="" class="a" /> 
<img src="image2.jpg" alt="" class="b" />

來源

2013-12-20 08:57:02 Billy

這是做我想做的，但我不能使用「位置：絕對」，因爲我使用的響應式網格... – Jan

您可以使用相對位置，這不應該是一個問題。 – Billy

好吧，如果我只使用絕對img.a它工作正常！謝謝！！ – Jan

使用CSS設置img標籤到所需的起點不透明度，並添加到您的代碼：

$('img[data-hover]').mouseover(function() { 
    $(this).fadeTo("slow", 1); 
} 

$('img[data-hover]').mouseout(function() { 
    $(this).fadeTo("slow", 0.25); // where 0.25 is the desired starting opacity 
}

看看在.fadeTo() API文檔，因爲你可能會想調整這個。

來源

2013-12-20 08:56:34 Jesse

爲特定的img懸停腳本添加jquery淡入淡出效果

回答

相關問題