用滚动淡入淡出替换图像

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

这里有一个简单的方法:设置一张图片作为背景，然后在顶部淡入另一张图片：

<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/

Answer 2

您正在将src设置为“-hover.jpg”

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

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