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

【问题标题】：Transparent png image swap with fade in jquery透明png图像交换与jquery中的淡入淡出
【发布时间】：2012-10-24 18:12:20
【问题描述】：

我有一个导航栏，其中包含需要翻转的图像，但它们是透明的 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”图像而不是把它放在第一个后面吗？

【问题讨论】：

标签： jquery png transparent fade rollover

【解决方案1】：

好吧，我得到了这个工作 - 由于图像是透明的，我只是将“上方”图像放在顶部，然后将其隐藏。我通过简单地将 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);
        });
    });

【讨论】：