jquery - jQuery easing of an image not working

Question

For whatever reason I cannot get the easing to work on some images. The browser just loads them instantly without easing.

What I'm trying to accomplish is so that the side images slide from the bottom to it's position and the middle image slides from the top.

http://jsfiddle.net/DPX9G/1/

$(document).ready(function() {
            $('.banner1 img, .banner3 img').animate({bottom:"0"}, '1000', 'easeOutBack');
            $('.banner2 img').animate({top:"0"}, '1000', 'easeOutBack')
        });

Any help would greatly be appreciated.

Answer 1

尝试将 $(document).ready 更改为

$(window).load

$(document).ready 在图像加载之前触发并且可以访问

Answer 2

我看到你使用了内联样式。如果您没有其他 CSS 将图像的位置设置为绝对或相对，您将无法对其进行动画处理。尝试：

<img src="images/banner1.jpg" alt="" style="bottom: 0px; position: relative;">

Answer 3

弄清楚了！

http://jsfiddle.net/DPX9G/4/

我必须将横幅图像上的内联样式设置为负值才能过渡。

style="bottom:-100%;"
style="top:-100%;"
style="bottom:-100%;"