使用jQuery旋转，请记住位置

我正在旋转div，如下面的代码所示。问题是我不知道如何使元素从最后一个位置继续时，我再次单击它。我怎么做？（我是能够做到这一点在没有在IE浏览器的方式）使用jQuery旋转，请记住位置

HTML：

<div class="square">click me</div>

CSS：

.square { 
    background:red; 
    height:100px; 
    width:100px; 
    cursor:pointer; 
}

JS：

$('.square').click(function() { 
    rotate($(this), -180, 1000); 
}); 

function rotate(element, degrees, speed) { 
    element.animate({ 
     borderSpacing: degrees 
    }, { 
     duration: speed, 
     step: function (now, fx) { 
      $(this).css('-webkit-transform', 'rotate(' + now + 'deg)'); 
      $(this).css('-moz-transform', 'rotate(' + now + 'deg)'); 
      $(this).css('transform', 'rotate(' + now + 'deg)'); 
     } 
    }); 
}

来源

2014-06-09 WIRN

只需使用两种不同类型和交换拨动他们用jQuery。 –

你想要左侧或右侧图像旋转？ – Illaya

你是什么意思Paulie_D？我没有问题Illaya – WIRN

您可以使用在jQueryRotator ...

，并使用js代码...

var value = 0 
$("#image").rotate({ 
    bind: 
    { 
     click: function(){ 
      value +=90; 
      $(this).rotate({ animateTo:value}) 
     } 
    }  
});

和工作小提琴是... http://jsfiddle.net/se4xc/ 希望这会给你造成。

来源

2014-06-09 12:53:31 Illaya

谢谢。我希望不必包含一些外部的jQuery代码，但噢以及...再次感谢 – WIRN

@WIRN它的好享受编码！ – Illaya

对不起，Illaya，我unclicked你的答案，因为我设法做到这一点，没有外部jQuery代码。我改变了JS到：

$(document).ready(function() { 


$('.square').click(function() { 
     if ($(this).hasClass('folded')) { 
      $(this).removeClass('folded'); 
      rotate($(this), 0, 700); 
     } else { 
      $(this).addClass('folded'); 
      rotate($(this), 180, 700); 
     } 
}); 

    function rotate(element, degrees, speed) { 
     element.animate({ 
      borderSpacing: degrees 
     }, { 
      duration: speed, 
      step: function (now, fx) { 
       $(this).css('-webkit-transform', 'rotate(' + now + 'deg)'); 
       $(this).css('-moz-transform', 'rotate(' + now + 'deg)'); 
       $(this).css('transform', 'rotate(' + now + 'deg)'); 
      } 
     }); 
    } 
});

Updated JSFiddle

来源

2014-06-09 14:22:28 WIRN

使用jQuery旋转，请记住位置

回答

相关问题