如何使用png和jquery进行翻转? [英] How do I make a rollover using png and jquery?
本文介绍了如何使用png和jquery进行翻转?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我对在网上找到的脚本进行了反向编码,并且效果很好,唯一的问题是,悬停图像会以完全可见的状态加载,直到发生悬停动作为止.这是脚本:
I reverse coded a script I found online and it works well, the only problem is that the hover image loads at complete visibility until the action of hover occurs. This is the script:
$(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
You can view a sample of it here: http://www.kaimeramedia.com/derek/Website/test.html
推荐答案
更改CSS以使其在加载时隐藏:
Alter your CSS to have it hide onload:
img.b {
position: absolute;
left: 0;
top: 0;
z-index: 10;
opacity: 0;
filter: alpha(opacity=0);
}
filter:alpha(opacity=0);
行用于I.E.
以下是上述解决方案的jsfiddle: http://jsfiddle.net/jasper/CyJXD/
Here is a jsfiddle of the above solution: http://jsfiddle.net/jasper/CyJXD/
这篇关于如何使用png和jquery进行翻转?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文