Question

我正在尝试使用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>

Answer 1

以下是具有背景位置用法的平滑动画示例：

<强> jsFiddle example to play with.

$(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()用于防止因触发的同一事件发生冲突同时。
background-position animate define：'background-position-y'＆amp; '背景位置-X'
您可以将,用于多个动画声明。
持续时间为200，这对平稳的动作非常重要。

Answer 2

你的图像可能在文件大小，将质量降低到合理的网页大小（100kb），它应该运行顺畅。

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

如何使jQuery背景动画更流畅

2 个答案:

---------