使用动画中的Step函数来变换和旋转元素
Using Step function in animate to transform-rotate an element
全部,
我正在尝试创建一个'to&fro’动画使用jquery animate&css转换属性。
我参考了这篇关于在animate中使用step函数的SO帖子,然而,我没有太大的成功。请查看&劝告
Jsfidle.net演示
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" ); });
以下是原始代码,我不喜欢变换动画(尽管它完美地设置了"顶部"值的动画)。
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" ) });
我不知道eCurHanger
是什么,但看看这里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");
您可以使用now
变量来代替全局angle
。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");
研究了一点。存在某些语法错误。这是你需要的输出,我想点击这里!。
与我一起工作的代码在这里:
$("#a").animate({ textIndent: 5 }, {
step: function(now,fx)
{
$(this).css({
'-webkit-transform':'rotate('+now+'deg)',
'transform':'rotate('+now+'deg)',
'-ms-transform':'rotate('+now+'deg)'});
},duration:1000,
complete:function() {
$("#a").animate({ textIndent: -5 }, {
step: function(now,fx)
{
$(this).css({
'-webkit-transform':'rotate('+now+'deg)',
'transform':'rotate('+now+'deg)',
'-ms-transform':'rotate('+now+'deg)'});
},duration:1000
});
}});
相关文章:
- 使用KineticJS变换(移动/缩放/旋转)形状
- html5画布变换和缓存渐变、曲线和旋转
- CSS3 变换从 360 度旋转到 0 度
- SVG:反转父变换上的子对象旋转
- 变换旋转+IE9/10故障
- CSS3变换使用鼠标位置旋转
- 使用动画中的Step函数来变换和旋转元素
- CSS3变换使用鼠标位置旋转-第二阶段
- 使用javascript围绕某个点旋转元素(不使用变换原点)
- 变换旋转和翻转效果- CSS3和jQuery
- 如何动画变换:旋转(Xdeg);
- 变换:旋转移动视图
- 标签在x轴上的旋转变换
- 为什么序列对矩阵转换很重要,比如旋转和平移变换同时进行
- 如何使用d3.js记录变换中的旋转属性
- 同时应用CSS变换缩放和旋转
- 尝试旋转和变换SVG路径-我需要三角计算
- D3.js旋转变换webkit和mozkit
- css变换2面立方体始终向上旋转
- 为相机设置变换矩阵后,旋转不会改变