[英]jQuery slideDown / slideUp not working in IE7
所以我使用的是非常基本的jQuery .slideDown,它在FF,Safari和Chrome中运行良好。 在IE7中根本不起作用。 这是脚本:
//Top Mailing List Drop down animation
$(document).ready(function() {
$('div#top_mailing_hidden').hide();
// Expand Panel
$("input#top_mailing").focus(function(){
$("div#top_mailing_hidden").slideDown("slow");
});
// Collapse Panel
$("input#top_mailing").blur(function(){
$("div#top_mailing_hidden").slideUp("slow");
});
});
我已经研究了几个小时,发现了一些与滑动/缩小有关的错误,导致它在用于postion的后代时在IE7中失败:固定元素。 这个动画发生在一个位置:固定的导航栏,但是,我已经尝试用位置包装内部元素:相对但无济于事,我仍然在IE中得不到任何东西。 另外,请注意nav元素是用jQuery隐藏的,即使在IE7中该函数也能正常工作,但是,滑动/缩小不是。
这是相关的CSS:
/* --------------Top Dropdown Mailing List------------------- */
#top_nav div#top_mailing{
float: right;
width: 351px;
padding: 0 10px 10px 5px;
background: url(images/top_mailing_bg.png) bottom center no-repeat;
position: absolute;
top: 0;
right: 0;
color: #fff;
text-shadow:0 -1px 0px #222;
}
#top_mailing #top_mailing_hidden{
font-size: .7em;
text-align: center;
position: relative;
height: 30px;
zoom: 1;
}
#top_mailing #top_mailing_hidden div{
}
#top_mailing #top_mailing_hidden a{
color: #acffc0;
font-weight: bold;
}
#top_mailing #top_mailing_visible{
height: 30px;
font-weight: bold;
font-size: .9em;
padding-top: 5px;
}
jQuery的slideUp()
, slideDown()
和slideToggle()
不适用于IE7中的 position:relative
元素。 可以通过添加来解决一些幻灯片问题
zoom: 1;
滑动容器和/或元件。
我们不得不恢复使用<table>进行布局来解决一些滑动问题。
在我的示例中出现此行为的原因是IE无法识别我用于触发.slideUp / Down的.focus。 我已经找到了一个很好的答案来解释这里的问题,但是这允许你在焦点上添加一个CSS类,但是我需要在.focus上使用slideUp / Down来设置一个单独的元素,这样CSS类对我的情况没有帮助,谁有想法?
得到它了! 我不得不使用mouseenter而不是focus,但这里是完成的脚本,带有魔鬼的条件mouseenter事件,即IE:
//Top Mailing List Drop down animation
$(document).ready(function() {
if (jQuery.browser.msie === true) {
jQuery('#top_mailing')
.bind("mouseenter",function(){
$("#top_mailing_hidden").slideDown('slow');
}).bind("mouseleave",function(){
$("#top_mailing_hidden").slideUp('slow');
});
}
$('#top_mailing_hidden').hide();
// Expand Panel
$("input#top_mailing").focus(function(){
$("#top_mailing_hidden").slideDown("slow");
});
// Collapse Panel
$("input#top_mailing").blur(function(){
$("#top_mailing_hidden").slideUp("slow");
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.