jQuery从左到右加载动画图像

时间:2013-09-23 15:15:03

标签: jquery

有些人可以建议我如何从左向右缓慢发送此图像? 我可以看到图像,我可以点击它去网址,但它没有动画,只是马上出现? 感谢

 <!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>

1 个答案:

答案 0 :(得分:2)

您需要将侦听器包装在DOM ready handler

$(function(){

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

fiddle code就在这里

<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;
}