Question

我有一个带有需要翻转的图像的导航栏，但它们是透明的png。背景是纹理的，所以透明png是必须的。我这样做了：

       $('.fade').each(function() {  
        var std = $(this).attr("src");
        var hover = std.replace(".png", "_over.png");
        $(this).wrap('<div />').clone().insertAfter(this).attr('src', hover).removeClass('fadein').siblings().css({
            position:'absolute'
        });
        $(this).mouseenter(function() {
            $(this).stop().fadeTo(600, 0);
        }).mouseleave(function() {
            $(this).stop().fadeTo(600, 1);
        });
    });

这是作为解决方案发布的： A better implementation of a fading image swap with javascript / jQuery

它有效，但问题是在页面加载时可以看到'淡入'png（这只是一个阴影），因为它应该在主图像后面： http://jsfiddle.net/qykwV/

我可以隐藏'_over.png'图像而不是仅仅将它放在第一个图像后面吗？

Answer 1

好吧，我让这个工作 - 因为图像是透明的，我只是将'over'图像放在上面然后隐藏它。我通过简单地将html src属性更改为覆盖图像并让脚本创建非“覆盖”图像来完成此操作：

       $('.fade').each(function() {  
        var std = $(this).attr("src");
        var hover = std.replace("_over.png", ".png");
        $(this).wrap('<div />').clone().insertAfter(this).attr('src', hover).removeClass('fadein').siblings().css({
            position: 'absolute',
            opacity: '0'
        });
        $(this).mouseenter(function() {
            $(this).stop().fadeTo(600, 1);
        }).mouseleave(function() {

            $(this).stop().fadeTo(600, 0);
        });
    });

透明的png图像交换淡入jquery

1 个答案: