jQuery缓动图像不起作用答案

【问题标题】：jQuery easing of an image not workingjQuery缓动图像不起作用
【发布时间】：2013-04-04 21:40:45
【问题描述】：

无论出于何种原因，我都无法在某些图像上进行缓动。浏览器只是立即加载它们而无需缓动。

我想要完成的是让侧面图像从底部滑动到它的位置，中间图像从顶部滑动。

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

任何帮助将不胜感激。

【问题讨论】：

标签： jquery easing jquery-easing

【解决方案1】：

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

$(window).load

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

【讨论】：

试过了，但这似乎并没有解决它。 $(window).load(function(e) {

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

想通了！

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

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

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

【讨论】：