Question

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

我有2张图片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)             
        })                    
})

DEMO： http://jsfiddle.net/Diodeus/gYyBL/

用翻转淡化替换图像

2 个答案: