这是我的网站：
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,动画最终在正确的地方,但所有的图像之前跳过.
这是代码：
@H_301_9@$(".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-我尝试添加条件语句,以便在必要时运行动画(缩小展开的元素),但是它根本不运行：
@H_301_9@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值.这意味着当您点击图像时,其他图像将再次动画.我检查了这个：
@H_301_9@$($(".image-div")[0]).css('background-position')
在IE中是未定义的.在FF它有正确的价值.所以动画是在IE中发生的,因为值不在那里.为什么我不知道
这可能是一个想法,以某种方式存储每个图像的状态(也许.data),然后使用它来确定恢复图像(使用您的动画).
尝试这个：
@H_301_9@$(".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'); }); } });