这是我的网站：
http://smartpeopletalkfast.co.uk/jquery/basicDemo12-bugfix-3.htm
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',function() { $(this).css('z-index','1'); });
}
});
// toggle clicked image
if ($(this).css('z-index') == 1) {
$(this).animate({
width: '500px',backgroundPosition: '0px'
},'2'); });
}
else {
$(this).animate({
width: '250px',backgroundPosition: '-125px'
},'1'); });
}
});
