我在 IE9 和以前的版本中遇到了淡入淡出的问题。它适用于 chrome/firefox。提供了一个 jsFiddle 示例。
我正在尝试淡化包含绝对定位图像和 div 中的文本的 div。所有内容都包含在最初隐藏的外部 div component_statsbox_helper 中。当我尝试淡入该元素时,图像很好地淡入淡出,但 div 中的文本立即显示出来。
http://jsfiddle.net/25Jbj/51/ (在 IE 中尝试!)
<div id="component_statsbox">
<div id="component_statsbox_helper" class="hidden">
<img alt="stats" src="http://www.esus.be/stats.png"></img>
<div class="stats_inner">
Date of birth: <span class="stats_inner_text">test</span><br/>
Time of birth: <span class="stats_inner_text">test</span><br/>
Place of birth: <span class="stats_inner_text">test2</span><br/>
Weight: <span class="stats_inner_text">test3</span><br/>
Height: <span class="stats_inner_text">test4</span><br/>
Mother: <span class="stats_inner_text">test5</span><br/>
Father: <span class="stats_inner_text">test6</span><br/>
</div>
</div>
</div>
淡入淡出的 jquery 代码:
jQuery(document).ready(function(){
jQuery('#link').click(function(){
jQuery('#component_statsbox_helper').fadeTo(3500, '1');
});
});
最佳答案
在开始时将 .state_inner
设置为 display:none;
然后您可以同时淡入文本,但作为单独的调用使用 fadeIn( )
。
jQuery(document).ready(function() {
jQuery('#link').click(function() {
jQuery('#component_statsbox_helper').fadeTo(3500, '1');
$('.stats_inner').fadeIn(3500);
});
});
由于 fadeTo()
和 fadeIn()
是异步的,因此这两行代码将同时执行。
这应该会产生与之前相同的效果,但它也适用于 IE9。
DEMO - 在 IE9 中使用图像淡化文本。
关于jquery - fadeTo 不会淡化 IE9 中的内部 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13675931/