将图像替换为滚动淡入淡出

Question

我试图在滚动时用另一个图像替换一个图像并使用淡入淡出。

我有两个图像water_bag.jpg和water_bag-hover.jpg

我正试图用以下javascript替换滚动时的一个：

<script type="text/javascript">
            $(document).ready( function() {
$('.my_img').parent().append($('.my_img').clone().attr('src','-hover.jpg').fadeIn('slow'))

});
</script>

我的html就是这样：

<a  href="<?php echo tep_href_link(FILENAME_EVENTS); ?>"><img src="images/home_buttons/water_bag.jpg" alt="watch la vie en couleur"   border="0" align="left" class="my_img" /></a>

我做错了什么？

Answer 1

您将src设置为仅'-hover.jpg'

您需要这样做才能将其设置为新图像：

$('.my_img').parent().append($('.my_img').clone().attr('src',$('.my_img').attr('src').replace('.jpg','-hover.jpg')).fadeIn('slow'))

Answer 2

这里有一个简单的方法：将一张图像设置为背景，并在顶部的另一张图像中淡入：

<img src="http://i.imgur.com/vdDQgb.jpg" hoverImg="http://i.imgur.com/Epl4db.jpg"> 

JS:

$('body').find('*[hoverImg]').each(function(index){
    $this = $(this)
    $this.wrap('<div>')     
    $this.parent().css('width',$this.width())  
    $this.parent().css('height',$this.width())
    $this.parent().css('background-image',"url(" + $this.attr('hoverImg')+")")
        $this.hover(function() {
            $(this).stop()
            $(this).fadeTo('',.01)    
        },function() {
            $(this).stop()
            $(this).fadeTo('',1)             
        })                    
})

演示：http://jsfiddle.net/Diodeus/gYyBL/