进入Jquery动画功能 [英] step in Jquery animate function
本文介绍了进入Jquery动画功能的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用jQuery中的步骤为CSS转换属性设置了动画. 我为动画功能保留的时间限制都没有考虑到. 我的代码是这样的
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);
在这里，我将div旋转约50度，时间跨度为50000ms，但不会花费那50000ms. 我可以做什么来创建那个时间跨度. 预先感谢.
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.
这是我的HTML.
Am使div像钟摆一样旋转.
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>
推荐答案
您使用的.animate参数不正确-您正在尝试传递duration 和 options不存在.您可以使用以下任一方式拨打电话:
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 )
.animate( properties [, duration ] [, easing ] [, complete ] ).animate( properties, options )
如果使用第二个版本，则需要在options对象中设置duration属性.
If you use the second version, then you need to set the duration property inside the options object.
这有效:
$(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动画功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
