Question

请教,使用JQuery的animate做透明度变化时,IE下出现轻微横向晃动

将两个li标签定位,上面的li标签逐渐隐藏.使用animate方法将透明度变为0,此时会显示第2个li.
问题就出现在使用animate渐变时,在IE下,当右侧有滚动条时,动态效果会出现轻微的晃动.将第一张图右移几像素后执行动画.
CSS,JS,HTML代码请见下图

请教高手, 这是什么问题?

Answer 1

1、给li固定高度，既然你已经知道banner高度是418了，你要做的就是把真实高度赋予li，除非他会变化，让浏览器自己去适应。

2、让li成为block，display:block。

3、js应该更严谨一些，b1和b2不用设置z-index，让他们在banner里面同时只会显示一个，这样就不会有交错问题。

4、用fadeIn和fadeOut吧，css里面设置透明度有啥意义？IE认识opacity:1么？应该是filter:alpha(opacity=100)，所以用fade是最好的。

js：

$(function(){
    $("#banner").find("li").hide();
    $("#banner").find(".b1").fadeIn(function(){
        $(this).fadeOut(function(){
            $("#banner").find(".b2").fadeIn();
        });
    });
});

这样他们在dom中不会抢位置，虽然不明白你的问题所在，但换个思路应该也能解决问题。木有具体实施过。你可以试试看。

追问

感谢,我试一下.
另外, JQuery中使用动画设置opacity时,JQuery会自动兼容各个浏览器的,包括IE

追答

jQuery本身就是兼容各个浏览器的，当然从2.0开始将不再支持IE低版本。所以对于jquery内置的函数方法不用怀疑他的兼容性。

Answer 2

一看你的代码就知道你是新手.为什么非要在li里面放上一个div,然后div里面放置一个背景图片,而且给它一个居中定位?
你直接在li里面放个img,然后li的overflow设置为hidden,给li一个对应图片大小的宽和高,ul的padding设置为0px,不就ok了吗?我调试了的,一点问题也没有.你的方法我没试,因为我不知道你的li的宽度,和你设置的图片宽度.

追问

你知道UI最基本的就是要适应不同的分辨率吗.多去看看基本知识及目前主流的应用在来说 别人是新手吧.......
你的那个img的做法好多年前就没有人用了, 别再这里误导别人了.

Answer 3

banner 添加一个 限定: overflow:hidden 试试.

追问

不好使, 在IE8下,执行动画的时候背景会像右侧偏移几像素.
好像和IE右侧的滚动条有关系, 没有滚动条的时候是没问题的.

追答

overflow：hidden 试试