在动画使用步骤函数变换旋转元素 [英] Using Step function in animate to transform-rotate an element
问题描述
所有,
我想创建一个到&安培;使用jQuery动画及放大器来回回'动画; CSS变换属性。
我提到这个,以便张贴在动画使用阶梯函数,但是,我不是有多大的成功。请查看与放大器;咨询。
HTML:
< UL ID =A>
<李班=cAccessoriesID =AccButtons><跨度>等等等等..< / SPAN>< /李>
<李班=cAccessoriesID =AccRibbons><跨度>等等等等..< / SPAN>< /李>
<李班=cAccessoriesID =AccLaces><跨度>等等等等..< / SPAN>< /李>
<李班=cAccessoriesID =AccEmbroider><跨度>等等等等..< / SPAN>< /李>
< / UL>
CSS:
#A {
位置:绝对的;
顶部:25像素;
左:25像素;
宽度:150像素;
高度:150像素;
填充:0;
保证金:0;
列表样式:无;
背景色:蓝色;
}
JavaScript的:
$(#一),动画({利润率左:+ = 10px的},{步:功能(目前,FX){
$(#一),CSS(-moz-改造,旋转('5deg'))。
$(#一),CSS(-webkit-改造,旋转('5deg'))。
$(#一),CSS(-ms变换,旋转('5deg'))。
$(#一),CSS(-o变换,旋转('5deg'))。
},持续时间:慢},线性,函数()
{
$(#一),动画({左:+ = 0像素},{步:功能(目前,FX){
$(#一),CSS(-webkit-改造,旋转('-5deg'))。
$(#一),CSS(-moz-改造,旋转('-5deg'))。
$(#一),CSS(-ms变换,旋转('-5deg'))。
$(#一),CSS(-o变换,旋转('-5deg'))。
},持续时间:慢},线性); });
以下是原文code,这是我不喜欢的动画变换(即使它的动画'顶'价值完美)。
iTemplateNo = $(本).attr(ID)SUBSTR(-1,1);
eCurHanger =的document.getElementById(hanger0+ iTemplateNo);
$(eCurHanger).attr(SRC,图/ V2 / Hanger.png);
$(eCurHanger)的.css({宽度:×45像素,高度:35px});
$(eCurHanger).animate({顶:+ = 10px的},{步:功能(角度,FX){
$(eCurHanger)的.css({-webkit-改造:旋转(+角+度),
-moz-变换:旋转(+角+度),
-ms变换:旋转(+角+度),
-o变换:旋转(+角+DEG)});
},时间:1000},线性,函数()
{
$(eCurHanger).animate({左:+ = 10px的},{步:功能(角度,FX){
$(本)的.css({-webkit-改造:旋转(+角+度),
-moz-变换:旋转(+角+度),
-ms变换:旋转(+角+度),
-o变换:旋转(+角+DEG)})
},时间:1000},线性)});
我不知道是什么 eCurHanger
是的,但看看这里的 http://jsfiddle.net/8tP9D/
VAR角= 0;
$(#一),动画({利润率左:+ = 200像素},{步:功能(目前,FX){
角+ = 1;
$(本)的.css({-moz-改造:旋转(+角+度),
-webkit-改造:旋转(+角+度),
-ms变换:旋转(+角+度),
-o变换:旋转(+角+DEG)});
},时间:5000},线性);
而不是全局角度
你可以使用现在
变量。 http://jsfiddle.net/39pe6/
$(#一),动画({利润率左:+ = 200像素},{步:功能(角度,FX){
$(本)的.css({-moz-改造:旋转(+角+度),
-webkit-改造:旋转(+角+度),
-ms变换:旋转(+角+度),
-o变换:旋转(+角+DEG)});
},时间:5000},线性);
All,
I am trying create a 'to & fro' animation using jquery animate & css transform property.
I referred to this SO post on using step function in animate, however, Im not having much success. Please review & advice.
HTML:
<ul id="a">
<li class="cAccessories" id="AccButtons"><span>blah blah..</span></li>
<li class="cAccessories" id="AccRibbons"><span>blah blah..</span></li>
<li class="cAccessories" id="AccLaces"><span>blah blah..</span></li>
<li class="cAccessories" id="AccEmbroider"><span>blah blah..</span></li>
</ul>
CSS:
#a {
position: absolute;
top: 25px;
left: 25px;
width: 150px;
height: 150px;
padding: 0;
margin: 0;
list-style: none;
background-color: blue;
}
JAVASCRIPT:
$("#a").animate ({"margin-left": "+=10px"}, {step: function (now, fx) {
$("#a").css ("-moz-transform", "rotate('5deg')");
$("#a").css ("-webkit-transform", "rotate ('5deg')");
$("#a").css ("-ms-transform", "rotate ('5deg')");
$("#a").css ("-o-transform", "rotate ('5deg')");
}, duration: "slow"}, "linear", function ()
{
$("#a").animate ({left: "+=0px"}, {step: function (now, fx) {
$("#a").css ("-webkit-transform", "rotate ('-5deg')");
$("#a").css ("-moz-transform", "rotate ('-5deg')");
$("#a").css ("-ms-transform", "rotate ('-5deg')");
$("#a").css ("-o-transform", "rotate ('-5deg')");
}, duration: "slow"}, "linear" ); });
Following is the original code, which I doesn't like the transform animation (even though it animates the 'top' value perfectly).
iTemplateNo = $(this).attr("id").substr (-1, 1);
eCurHanger = document.getElementById("hanger0" + iTemplateNo);
$(eCurHanger).attr("src", "Img/V2/Hanger.png");
$(eCurHanger).css ({"width": "45px", "height": "35px"});
$(eCurHanger).animate ({top: "+=10px"}, {step: function (angle, fx) {
$(eCurHanger).css ({"-webkit-transform": "rotate ("+angle+"deg)",
"-moz-transform": "rotate ("+angle+"deg)",
"-ms-transform": "rotate ("+angle+"deg)",
"-o-transform": "rotate ("+angle+"deg)"});
}, duration: 1000}, "linear", function ()
{
$(eCurHanger).animate ({left: "+=10px"}, {step: function (angle, fx) {
$(this).css ({"-webkit-transform": "rotate("+angle+"deg)",
"-moz-transform": "rotate("+angle+"deg)",
"-ms-transform": "rotate("+angle+"deg)",
"-o-transform": "rotate("+angle+"deg)"})
}, duration: 1000}, "linear" ) });
I do not know what eCurHanger
is, but look here http://jsfiddle.net/8tP9D/
var angle = 0;
$("#a").animate ({"margin-left": "+=200px"}, {step: function (now, fx) {
angle += 1;
$(this).css ({"-moz-transform":"rotate("+angle+"deg)",
"-webkit-transform":"rotate("+angle+"deg)",
"-ms-transform":"rotate("+angle+"deg)",
"-o-transform":"rotate("+angle+"deg)"});
}, duration: 5000}, "linear");
instead of global angle
you could use now
variable. http://jsfiddle.net/39pe6/
$("#a").animate ({"margin-left": "+=200px"}, {step: function (angle, fx) {
$(this).css ({"-moz-transform":"rotate("+angle+"deg)",
"-webkit-transform":"rotate("+angle+"deg)",
"-ms-transform":"rotate("+angle+"deg)",
"-o-transform":"rotate("+angle+"deg)"});
}, duration: 5000}, "linear");
这篇关于在动画使用步骤函数变换旋转元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!