CODEWITHSUNDEEP
jquery
Dillon
Dillon

Reputation: 51

jQuery on load animate image from left to right

Can some kind person advise how I send this image from the left to the right slowly? I can see the image and I can click it to go to the url but it doesnt animate, just appears right away? Thanks

 <!DOCTYPE html>
 <html>
 <head>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
 </script>
 <script>
 $( "#lefttoright" ).animate({opacity: 0.25,    left: "=250",
 height: "toggle"  },  5000, function() {    // Animation complete.
 });}); 
 </script>
 </head>
 <body>
    <div id="lefttoright">    
    <a href="http://www.stackoverflow.com" title="go to link">
    <img src="/images/leftright.png" alt="news" width="150" height="75" /></a>
    </div>
</body>
</html>

Upvotes: 0

Views: 3259

Answers (1)

karthikr
karthikr

Reputation: 99680

You need to wrap the listener in the DOM ready handler

$(function(){

    $( "#lefttoright" ).animate({ opacity: 0.25, left: "250", height: "toggle"  },  5000, function() {    
         // Animation complete.
    });
});

The fiddle code is here

<div id="lefttoright"> <a href="http://www.stackoverflow.com" title="go to link">
    <img src="https://www.google.com/images/srpr/logo4w.png" alt="news" width="150" height="75" /></a>
</div>

var left = $(window).width() - $('#lefttoright').offset().left;

$("#lefttoright").animate({
    opacity: 0.25,
    left: left,
}, 5000, function () { 
    // Animation complete.
});


#lefttoright {
    width: 200px;
    height: 200px;
    position: absolute;
    background: yellow;
}

Upvotes: 2

Related Questions