step in Jquery animate function

2020-08-05 10:23发布

站内问答 / JavaScript
1557 1 6

Am using step in jQuery animate to animate CSS transform property. What ever the time limit that i kept for animate function its not taking into consideration. My code is like this

$('#instructions').animate({now:'+=50'},{
    step: function(now) {
      $(this).css('transform','rotate('+now+'deg)'), duration:'slow'
    }
},50000);

Here am rotating my div about 50 deg with a time span of 50000ms,but its not taking those 50000ms. What i can do to create that time span. Thanks in advance.

Here is my HTML.

Am making the div rotation like a pendulum clock.

<html>
    <head>
        <style type="text/css">
            .subMenu {
                width: 143px;
                height: 80px;
                border-bottom: 1px solid white;
                line-height: 110px;
                text-align: center;
                font-size: 27px;
            }
            #line:before{
                border-left: 1px solid white;
                border-right: 1px solid white;
                border-bottom: 49px solid white;
                content: "";
                position: absolute;
                top: -50px;
                left: 59px;
            }
        </style>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $('#instructions').animate({  now: '+=50' }, {
                    step: function(now,fx) {
                    $(this).css('transform','rotate('+now+'deg)');  
                    }
                },50);

                $('#instructions').animate({  now: '-=100' }, {
                    step: function(now,fx) {
                    $(this).css('transform','rotate('+now+'deg)');  
                    }
                },50);
                $('#instructions').animate({  now: '+=50' }, {
                    step: function(now,fx) {
                    $(this).css('transform','rotate('+now+'deg)');  
                    }
                },50);
            });
        </script>
    </head>
    <body>
        <div id="menu" style="width: 43px;
            height: 34px;
            position: absolute;
            margin: 5px;
            left: 188px;
            box-shadow: 4px 4px 13px white;
            border: 1px solid black;
            line-height: 28px;
            font-weight: bold;
            text-align: center;">Menu</div>
        <div style="transform: rotate(0deg) scale(1, 1); display: block;
            width: 1px;
            height: 1px;
            position: absolute;
            background: white;
            left: 216px;
            top: 48px;" id="instructions"><div id="line" style="width: 101px;
                height: 73px; position: absolute; top: 50px; left: -59px;
                font-family: cursive; box-shadow: 3px 3px 23px 0px white;
                padding: 12px; background: white;">
                Click Here to Show/Hide the Menu</div></div>

        <div id="section1" style="height: 556px;
            width: 230px;
            background: rgb(106, 163, 226);
            float: left;
            border: solid black ;
            border-width: 1px 0px 1px 1px;
            /* display: none; */"><div style="height: 200px;
                width: 180px;
                margin-left: 40px;
                margin-top: 165px;
                color: white;
                cursor:pointer;"><div class="subMenu" style="color:black;"
                    id="uploadMenu">UPLOAD</div>
                <div class="subMenu" id="viewMenu">VIEW</div>
                <div class="subMenu" id="reportMenu">REPORT</div></div>
        </div>
        <div id="section2">
            <div id="main_content" style="height: 556px;
                width: 1080px;
                background:rgb(6,206, 151);
                border: solid black;

                border-width:1px 1px 1px 0px ;
                float: left;">
            </div>
        </div>
    </body>
</html>

jsfiddle.net

1条回答
来，给爷笑一个
2楼-- · 2020-08-05 11:04

You are using .animate with the incorrect parameters - you are trying to pass a duration and options which doesn't exist. You call using either:

  • .animate( properties [, duration ] [, easing ] [, complete ] )
  • .animate( properties, options )

If you use the second version, then you need to set the duration property inside the options object.

This works:

$(document).ready(function(){
    var animDuration = 1000;

    $('#instructions').animate({  now: '+=50' }, {
        duration:animDuration,
        step: function(now,fx) {
            $(this).css('transform','rotate('+now+'deg)');
        }
    });

    $('#instructions').animate({  now: '-=100' }, {
        duration:animDuration,
        step: function(now,fx) {
          $(this).css('transform','rotate('+now+'deg)');  
        }
    });

    $('#instructions').animate({  now: '+=50' }, {
        duration:animDuration,
        step: function(now,fx) {
          $(this).css('transform','rotate('+now+'deg)');  
        }
    });

})
.subMenu {
    width: 143px;
    height: 80px;
    border-bottom: 1px solid white;
    line-height: 110px;
    text-align: center;
    font-size: 27px;
}
#line:before {
    border-left: 1px solid white;
    border-right: 1px solid white;
    border-bottom: 49px solid white;
    content:"";
    position: absolute;
    top: -50px;
    left: 59px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="menu" style="
    width: 43px;
    height: 34px;
    position: absolute;
    margin: 5px;
    left: 188px;
    box-shadow: 4px 4px 13px white;
    border: 1px solid black;
    line-height: 28px;
    font-weight: bold;
    text-align: center;
">Menu</div>
<div style="
    transform: rotate(0deg) scale(1, 1);  display: block;  
    width: 1px;  
    height: 1px;
    position: absolute;
    background: white;
    left: 216px;
    top: 48px;
" id="instructions">
    <div id="line" style="
    width: 101px;  height: 73px;  position: absolute;  top: 50px;  left: -59px;  font-family: cursive;  box-shadow: 3px 3px 23px 0px white;  padding: 12px;  background: white;
">Click Here to Show/Hide the Menu</div>
</div>
<div id="section1" style="
    height: 556px;
    width: 230px;
    background: rgb(106, 163, 226);
    float: left;
     border: solid black ;
    border-width: 1px 0px 1px 1px;
    /* display: none; */
">
    <div style="
    height: 200px;
    width: 180px;
    margin-left: 40px;
    margin-top: 165px;
    color: white;
   cursor:pointer;
">
        <div class="subMenu" style="color:black;" id="uploadMenu">UPLOAD</div>
        <div class="subMenu" id="viewMenu">VIEW</div>
        <div class="subMenu" id="reportMenu">REPORT</div>
    </div>
</div>
<div id="section2">
    <div id="main_content" style="
    height: 556px;
    width: 1080px;
  background:rgb(6,206, 151);
    border: solid black;

    border-width:1px 1px 1px 0px ;
    float: left;
"></div>
</div>

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