jquery - 如何使用 png 和 jquery 进行翻转？

Question

我反向编码了一个我在网上找到的脚本，它运行良好，唯一的问题是悬停图像在完全可见的情况下加载，直到发生悬停动作。这是脚本：

$(document).ready(function()
{
$("img.b").hover(
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
});

});
</script>

这是 CSS 文件：

<style>
div.fadehover {
    position: relative;
    }

img.b {
    position: absolute;
    left: 0;
    top: 0;

        z-index: 10;
    }

img.a {
    position: absolute;
    left: 0;
    top: 0;
    }
</style>

这是正文代码：

<div class="fadehover">
<a href=""><img src="portfolio_a.png" alt="" class="a" />
<img src="portfolio_b.png" alt="" class="b" /></a>

</div>

您可以在此处查看示例：http ://www.kaimeramedia.com/derek/Website/test.html

Answer 1

改变你的 CSS 让它隐藏 onload：

img.b {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    opacity: 0;
    filter: alpha(opacity=0);
}

该filter:alpha(opacity=0);行适用于 IE

这是上述解决方案的 jsfiddle：http: //jsfiddle.net/jasper/CyJXD/