Использование функции шага в анимации для преобразования-вращения элемента - PullRequest
Новая
       44

Использование функции шага в анимации для преобразования-вращения элемента

2 голосов
/ 16 февраля 2012

All

Я пытаюсь создать анимацию «туда и сюда», используя свойство jquery animate и css transform.

Я упомянул этот ТАК пост об использовании функции шага в animate, однако, я не добился большого успеха. Пожалуйста, просмотрите и совет.

Демонстрация Jsfiddle.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" ) });

Ответы [ 2 ]

2 голосов
/ 16 февраля 2012

Я не знаю, что такое 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");
1 голос
/ 05 декабря 2013

Исследовал немного. Были определенные синтаксические ошибки. Вот вывод, который вам необходим, я думаю Нажмите здесь! .

Код работающий со мной здесь: 

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