使用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旋轉，請記住位置

回答

相關問題