Question

使用jQuery动画中的步骤为CSS转换属性设置动画。我为动画功能保留的时间限制没有考虑到。我的代码就像这样

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

这里旋转我的div大约50度，时间跨度为50000ms，但它没有花费50000ms。我能做些什么来创造那个时间跨度。提前谢谢。

这是我的HTML。

将div旋转像摆钟一样。

<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

Answer 1

您使用.animate的参数不正确 - 您正在尝试传递不存在的duration 和 options。您使用以下任一方式致电：

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

如果您使用第二个版本，则需要在duration对象中设置options属性。

这有效：

$(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>

进入Jquery动画功能

1 个答案: