在動畫使用步驟函數變換旋轉的元素

我試圖創建使用jQuery動畫& CSS變換屬性「來&回回」的動畫。

我參考this SO發表在使用step動畫功能的動畫，但是，我沒有太大的成功。請回顧&的建議。

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") });

來源

2012-02-16 Kayote

什麼是'eCurHanger'？ – Cheery 2012-02-16 07:43:28

我的歉意，我已經改變了代碼，並忘記了這一點。 – Kayote 2012-02-16 08:11:43

注意從jQuery變換cssHooks – noob 2012-02-16 11:55:53

我不知道什麼是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");

，而不是全球angle你可以使用now變量。 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");

來源

2012-02-16 07:53:13 Cheery

謝謝。我似乎仍然無法使其工作。我不知道我做錯了什麼。我用原始代碼更新了原文。將感謝關於我哪裏出錯的反饋（包括回調函數）。 – Kayote 2012-02-16 10:01:27

你有沒有與回調函數的運氣？ – Kayote 2012-02-16 12:31:58

@Kayote micha在評論中給了你一個答案 – Cheery 2012-02-16 17:23:52

研究了一下。有一定的語法錯誤。這是您需要的輸出，我認爲Click Here!。

的代碼和我一起工作是在這裏：

$("#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 
}); 
}});

來源

2013-12-05 18:02:09

在動畫使用步驟函數變換旋轉的元素

回答

相關問題