how to smooth jquery animations

2020-02-10 09:22发布

站内问答 / JavaScript
911 4 5

I would like to smooth the chaining of some jquery.animate functions.

Here is a jsfiddle where I describe the problem : http://jsfiddle.net/xavier_seignard/KTxbb/4/

As you can see, there is a stop between each animation, even with the linear attribute.

Do you have any idea about how to smooth it? Or anything else that would do the trick?

Regards

4条回答
萌系小妹纸
2楼-- · 2020-02-10 09:58

I think you should just try out the jQuery Easing plugin - http://gsgd.co.uk/sandbox/jquery/easing/

Include the file and instead of "liner" add some other easing.

查看更多
0人赞 添加讨论(0) 举报
Ridiculous、
3楼-- · 2020-02-10 10:06

Is it the change in speed that you're describing?

That is because the animations have the same timings but the distance the square box is covering differs. You might need to alter the time for each animation dependant in the distance travelled.

查看更多
0人赞 添加讨论(0) 举报
▲ chillily
4楼-- · 2020-02-10 10:11

You can change the speed for a more "fine" animation, you see that stop because the speed it's too fast and different size to cover:

function initPage() {
    $.each(json, function() {
        $("#point").animate({
            left: this.x,
            top: this.y
        },
        1000, 'linear');
    });
}​
查看更多
0人赞 添加讨论(0) 举报
Emotional °昔
5楼-- · 2020-02-10 10:20

Thats the problem with jsfiddle.. I tested your jsfiddle link and it was not looking great as you mentioned in your question.

But then I created new page on my pc and copied everything from your fiddle and checked it. It looks alright.

Copy and paste this and save it as html and test it :

<html>
<head>
  <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
  <link rel="stylesheet" type="text/css" href="http://fiddle.jshell.net/css/normalize.css">
    <style type="text/css">
    #point {
    position: absolute;
    background-color: black;
    width: 15px;
    height: 15px
}
    </style>
</head>
<body onload="initPage()">
    <div class="start" id="point"></div>
<script type="text/javascript">
    var json = [
                {'x' : '300' , 'y' : '200'},
                {'x' : '250' , 'y' : '150'},
                {'x' : '209' , 'y' : '387'},
                {'x' : '217' , 'y' : '323'},
                {'x' : '261' , 'y' : '278'},
                {'x' : '329' , 'y' : '269'},
                {'x' : '406' , 'y' : '295'}
            ];


function initPage() {
    $.each(json, function() {
        $("#point").animate({
            left: this.x,
            top: this.y
        },
        "linear");
    });
}
</script>
    </body>

</html>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)