jquery - 透明png图像交换与jquery中的淡入淡出

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);
        });
    });