jquery - 带有设置链接的背景位置的jQuery数组

Question

好的，我一直在研究这个小提琴。基本上它是四个按钮来控制背景图像的位置，但从一个位置到另一个位置并不顺畅。会有更好的方法来做同样的事情吗？

这是我的代码：

html:

<div id="container">
    <div id="content">
        <ul>
            <li id="btn-0">button-1</li>
            <li id="btn-1">button-2</li>
            <li id="btn-2">button-3</li>
            <li id="btn-3">button-4</li>
        </ul>
    </div>
</div>

Javascript：

$(document).ready(function () {
    $('li').click(function () {
        currClick = $(this).index();
        bgPos = [{
            'background-position-x': '0px',
                'background-position-y': '0px'
        }, // 0
        {
            'background-position-x': '-50px',
                'background-position-y': '-150px'
        }, // 1
        {
            'background-position-x': '150px',
                'background-position-y': '-20px'
        }, // 2
        {
            'background-position-x': '-200px',
                'background-position-y': '-250px'
        } // 3
        ];
        $('#container').animate(bgPos[currClick], 1500, 'swing');
    });
});

CSS：

#container {
    height:500px;
    width:500px;
    background-image:url("http://postmediawindsorstar.files.wordpress.com/2013/01/cat_shot_by_arrow-1.jpg");
}
#content {
    position:absolute;
    margin-left:-250px;
    left:50%;
    height:300px;
    width:300px;
    border:1px solid #FFF;
}
li {
    color:#FFF;
}

此外，如果您点击按钮进行垃圾邮件，它不会在移动到下一个位置之前停止其当前动画。

Answer 1

尝试使用；

$('#container').clearQueue();
$('#container').stop();
$('#container').animate(bgPos[currClick], 1500, 'swing');

Answer 2

CSS 动画比浏览器中的 js 快得多。我会调查他们：

http://css3.bradshawenterprises.com/blog/jquery-vs-css3-transitions/