如何解决jQuery动画在IE8和更早的版本中混乱了
| 这是我的网站: http://smartpeopletalkfast.co.uk/jquery/basicDemo12-bugfix-3.htm 它在Firefox,chrome,safari和ie9上工作正常,但在IE8和7中却混乱了。 当您单击图像时,它将展开。当您单击另一个图像时,所有展开的图像都会收缩。我认为这是jQuery的第二部分引起问题。使用IE8和7,动画最终会放置在正确的位置,但是所有图像在此之前都会跳来跳去。 这是代码: $(\".image-div\").click(function () {
var divRefTwo = $(\".image-div\").not(this);
$(\".image-div\").not(this).animate({
width: \'250px\',left: \'0px\',marginRight: \'0px\',backgroundPosition: \'-125px\'
},400,function() {
$(divRefTwo).css(\'z-index\',\'1\');
});
if ($(this).css(\'z-index\') == 1) {
$(this).css(\'z-index\',\'2\');
$(this).animate({
width: \'500px\',left: \'-125px\',marginRight: \'-250px\',backgroundPosition: \'0px\'
},500,function() {
//
});
}
else {
var divRef = this;
$(this).animate({
width: \'250px\',function() {
$(divRef).css(\'z-index\',\'1\');
});
}
});
有谁知道为什么会这样吗?调试起来非常困难,因为问题仅在动画运行时才会出现。
谢谢
UPDATE-我尝试添加条件语句以仅在必要时运行动画(缩小展开的元素),但是这样做根本无法运行:
if ($(\".image-div\").not(this).css(\'width\') == \'500px\') {
$(\".image-div\").not(this).animate({
width: \'250px\',\'1\');
});
}
else {
}
UPDATE2-Ive在这里更新了最新的演示:
http://smartpeopletalkfast.co.uk/jquery2/basicDemo12-bugfix-6.htm
条件语句可防止动画在原本不应该扩展的div上运行。因此,这解决了所有div跳来跳去的问题。
但是,当动画在被单击的div上运行时(如其预期的那样),该div在IE7和8上仍会怪异地扩展。这似乎与怪异的背景位置动画有关。
解决方法
我暗中怀疑IE在动画之后没有更新CSS值。这意味着,当您单击图像时,其他图像将再次被动画化。我检查了这个:
$($(\".image-div\")[0]).css(\'background-position\')
在IE中是未定义的。在FF中,它具有正确的值。由于该值不存在,因此动画正在IE中进行。为什么我不知道为什么。
最好以某种方式存储每个图像的状态(可能是.data
),然后使用该状态来确定恢复图像的方式(使用动画)。
尝试这个:
$(\".image-div\").click(function () {
// reset expanded images
$(\".image-div\").not(this).each(function() {
if ($(this).css(\'z-index\') == \'2\') {
$(this).animate({
width: \'250px\',left: \'0px\',marginRight: \'0px\',backgroundPosition: \'-125px\'
},400,function() { $(this).css(\'z-index\',\'1\'); });
}
});
// toggle clicked image
if ($(this).css(\'z-index\') == 1) {
$(this).animate({
width: \'500px\',left: \'-125px\',marginRight: \'-250px\',backgroundPosition: \'0px\'
},500,\'2\'); });
}
else {
$(this).animate({
width: \'250px\',backgroundPosition: \'-125px\'
},\'1\'); });
}
});
, 两件事导致了这个问题
IE 9之前的版本没有
支持背景位置
支持background-position-x和
背景位置
jQuery不会
切换到支持的样式时
应该
强制jQuery使用支持的样式
var default_css = $.css;
$.css = function (elem,name,extra) {
name = $.camelCase(name);
// if requested css name is not backgroundPosition then jQuery can handel it
if (!name.match(/.*backgroundPosition/i) || !elem.currentStyle || elem.currentStyle[name]) return default_css.apply(this,arguments);
// if backgroundPosition is supported by browser then return backgroundPosition value
var style = elem.style;
if (!extra && style && style[name]) return style[name];
// if we get here browser doesn\'t support backgroundPosition,we need to fix it
return default_css(elem,\'backgroundPositionX\',extra) + \' \' + default_css(elem,\'backgroundPositionY\',extra);
};
将此脚本放在jQuery-1.6.1脚本之后的页面中。
经过IE7,IE8,IE9,Chrome,Opera,Firefox和Safari的测试
,
有谁知道为什么会这样吗?
是的,这似乎是因为折叠动画正在所有其他图像上运行,如果只在展开的图像上运行折叠动画,则效率会更高,并且应该可以解决您的问题。
如果需要,我可以在jsfiddle中演示
您对问题的更新绝对是正确的主意,您只想在展开的图像上运行动画。
您可以在每次扩展图像.addClass(\'expanded\')
时添加一个类,然后检查该类。显然,一旦该类再次崩溃,就将其删除。
您的更新无法正常运行,因为它需要通过.each()
函数运行
$(this).siblings().each(function(){
if ($(this).width() == \'500px\') {
$(this).animate({
width: \'250px\',function() {
$(divRefTwo).css(\'z-index\',\'1\');
});
}
});
, 我已经检查了您提供的链接。确保验证您的html页面。更好的浏览器,例如Chrome,Firefox,Safari和其他所有浏览器,都将理解您的html事件,但会出现一些错误。 IE不那么灵活。无效的W3C html页面将包含一些惊奇之处。
而且您提供的链接不是W3C有效的。
, 也许您可以尝试以下方法:
$(\".image-div\").not(this).each(function(){
if ($(this).css(\'z-index\') != 1)
{
$(this).animate({
width: \'250px\',backgroundPosition: \'-125px\'
},function() {
$(divRefTwo).css(\'z-index\',\'1\');
});
}
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。