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.

score 0 · Answer 1 · answered Apr 04 '13 at 21:50

0

Try changing $(document).ready to

$(window).load

$(document).ready fires before the images load and are accessible

answered Apr 04 '13 at 21:50

Maibock

1
1

Tried that, but that didn't seem to fix it. $(window).load(function(e) { – Alex Kushner Apr 04 '13 at 22:19

score 0 · Answer 2 · answered Apr 04 '13 at 22:56

0

I see you've used inline styles. If you do not have other CSS that sets the image's position to absolute or relative, you will not be able to animate it. Try:

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

answered Apr 04 '13 at 22:56

Maibock

1
1

score 0 · Answer 3 · answered Apr 05 '13 at 21:23

0

Figured it out!

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

I had to set the inline style on the banner images to negative values for it to transition.

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

answered Apr 05 '13 at 21:23

Alex Kushner

31
3

jQuery easing of an image not working

3 Answers3