用翻转淡入淡出替换图像 [英] replace image with rollover fade

问题描述

我正在尝试将一张图片替换为另一张图片，并使用淡入淡出效果.

I am trying to replace an image with another image on rollover and use a fade.

我有2张图片water_bag.jpg和water_bag-hover.jpg

I have 2 images water_bag.jpg and water_bag-hover.jpg

我正尝试使用以下javascript替换滚动广告:

I am trying to replace one on rollover with the following javascript:

<script type="text/javascript">
            $(document).ready( function() {

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


});
</script>

我的html就是这样:

My html is just this:

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

我在做什么错了?

推荐答案

简单的方法是:将一幅图像设置为背景，然后将另一幅图像淡入顶部:

Here's simple way: set one image as a background, and fade in another on top:

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

这篇关于用翻转淡入淡出替换图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！