jquery – 在IE9动画期间的影子文物

前端之家收集整理的这篇文章主要介绍了jquery – 在IE9动画期间的影子文物前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
这里是css,html和js来重现:

HTML

<div id="outer">
    <div>123</div>
    <div id="inner">345</div>
</div>

CSS:

#outer {
    -moz-border-radius: 5px;
    border-radius: 5px;
    Box-shadow: 0px 3px 2px rgba(0,0.3);
}

#inner {
    height: 200px;
}

JS:

$(function() {
    $('#outer').click(function() {
        $('#inner').slideUp();
    });
});

http://jsfiddle.net/DwApF/以及

这个问题的任何解决方法

解决方法

尝试#1

http://jsfiddle.net/DwApF/3/

这将隐藏影子,然后在幻灯片完成后恢复.这是一个解决办法,但这是一种可以规避各种行为的方式.

尝试#2

http://jsfiddle.net/DwApF/11/

这可以同时动画外部和内部容器.它幻灯片没有任何工件.但是,您需要手动操作外部容器的高度,并且还可以隐藏内部容器的内容.它确实消除了工件问题.

尝试#3 – 我的首选解决方

http://jsfiddle.net/DwApF/12/

这仍然使用外部/内部容器的同时动画.我在IE9中看不到任何文物.它还使用overflow:hidden处理隐藏内部容器的内容.

外部容器的尺寸仍然必须手动完成,但我认为这是一个充分的解决方案.应该有一种方法来确定使用jQuery的折叠高度,以便该值不需要硬编码.

解决方案适用于IE9,Chrome和Firefox.请注意,我添加了一些颜色/边框,以便更容易看到不同的容器.

原文链接:https://www.f2er.com/jquery/179953.html

猜你在找的jQuery相关文章