0

我正在尝试使用 jQuery 做一个简单的背景动画。但是动画并不流畅。我怎样才能使它顺利？以下是代码，正在使用的图像大小为 4288 X 3216 px

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>bg</title>
    <style>
    #mydiv
    {
        background:url(bg2.jpg) repeat-x;
        height:900px;
        width:100%;
    }
    </style>

    </head>

    <body>

    <div id="mydiv">

    </div>
    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="js/bgpos.js"></script>
    <script type="text/javascript">
    $(document).ready (function()
            {
                move();


    function move()
    {
        $('#mydiv').animate({"backgroundPosition":"+=5"},100,"linear",move);
    };


    });
    </script>
    </body>
    </html>
4

2 回答 2

0

您的图像文件大小可能过大，将质量降低到合理的网络大小（100kb）并且它应该运行流畅。

（我的小提琴，图片是 100kb） http://fiddle.jshell.net/EuwGb/

于 2012-08-09T12:18:23.637 回答
0

这是使用背景位置的平滑动画示例：

jsFiddle 示例。

$(document).ready (function() {
 $('div').bind({
  mouseenter: function() {
   $(this).stop().animate({'background-position-y':'-20px','height':'68px'},600);
  },
  mouseleave: function() {
   $(this).stop().animate({'background-position-y':'-58px','height':'30px'},600);
  }
 });​
});

---------

这是animate()结构示例：

.animate( properties [, duration] [, easing] [, complete] )
//i didn't use easing here

$('#mydiv').stop().animate({'background-position-y':'-2px','height':'6px'},200,  
   function() {
      $('#mydiv').stop().animate({'background-position-x':'-20px'},200);
      //this will initualise when animate complete
   }
);
  • .stop()用于防止同时触发的同一事件发生冲突。
  • 背景位置动画定义：'背景位置-y'和'背景位置-x'
  • 您可以,用于多个动画声明。
  • end 200 持续时间，这对于流畅的动画很重要。
于 2012-08-09T12:09:30.380 回答