jQuery fadeIn 在 Internet Explorer 中不起作用
我有以下 HTML DIV,它无法在 IE 中使用 FadeIn:
$(".tip").fadeIn("slow"); /* Is not working in IE. */
$(".tip").show(); /* Works well in IE, that's weird. */
<div class="tip" style="width: 220px; display: none;">
<div class="tip-header">
<span><b>Title</b></span>
<div class="right close"><a href="javascript:void(0);">close</a> <img alt="" src="/Images/close-normal.png"/></div>
</div>
<div class="tip-content">EBody comes here.</div>
</div>
.tip
{
display: block;
z-index: 99999;
position: fixed;
background-color: #ffffff;
-moz-box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 0.6);
border:solid 1px #82C2FA;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
}
.tip-header
{
padding: 8px;
min-height: 10px;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
-webkit-border-radius-topright: 8px;
-webkit-border-radius-topleft: 8px;
background-color: #CFE6FD;
border-bottom: 1px solid #82C2FA;
}
.tip-header span
{
font-size: 14px;
color: #666666;
}
.tip-content
{
padding: 8px;
text-align: left;
font-size: 12px;
}
.close, .whats-this
{
cursor: pointer;
}
.close a
{
color: #085FBC;
text-decoration: none;
}
.close img
{
vertical-align: bottom;
}
I have the following HTML DIV which does not work using FadeIn in IE:
$(".tip").fadeIn("slow"); /* Is not working in IE. */
$(".tip").show(); /* Works well in IE, that's weird. */
<div class="tip" style="width: 220px; display: none;">
<div class="tip-header">
<span><b>Title</b></span>
<div class="right close"><a href="javascript:void(0);">close</a> <img alt="" src="/Images/close-normal.png"/></div>
</div>
<div class="tip-content">EBody comes here.</div>
</div>
.tip
{
display: block;
z-index: 99999;
position: fixed;
background-color: #ffffff;
-moz-box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 0.6);
border:solid 1px #82C2FA;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
}
.tip-header
{
padding: 8px;
min-height: 10px;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
-webkit-border-radius-topright: 8px;
-webkit-border-radius-topleft: 8px;
background-color: #CFE6FD;
border-bottom: 1px solid #82C2FA;
}
.tip-header span
{
font-size: 14px;
color: #666666;
}
.tip-content
{
padding: 8px;
text-align: left;
font-size: 12px;
}
.close, .whats-this
{
cursor: pointer;
}
.close a
{
color: #085FBC;
text-decoration: none;
}
.close img
{
vertical-align: bottom;
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
只需删除
$(".tip").show();
行,它隐含在FadeIn()
方法中。这是一个工作示例(IE8)
http://jsfiddle.net/Cxvdk/1/
Just remove the
$(".tip").show();
line, it is implicit in theFadeIn()
method.Here's a working example (IE8)
http://jsfiddle.net/Cxvdk/1/
本,
我知道
$(".tip").show();
是隐式且不必要的,但我想告诉您 .show 可以在 < strong>.fadeIn 没有。我更新了您的 jsFiddle 代码 http://jsfiddle.net/Cxvdk/4/。请检查一下。我添加了导致问题的外部 DIV。??
Ben,
I know that
$(".tip").show();
is implicit and un-necessary, but I want to tell you from this that .show works while .fadeIn does not. I updated your jsFiddle code http://jsfiddle.net/Cxvdk/4/. Please check it. I added an outer DIV which caused the issue.??
从 css 中删除它,它将起作用:
.section
{
显示:块;
}
Delete this from the css and it will work:
.section
{
display: block;
}