2014-06-09 101 views
0

我正在旋轉div,如下面的代碼所示。 問題是我不知道如何使元素從最後一個位置繼續時,我再次單擊它。我怎麼做? (我是能夠做到這一點在沒有在IE瀏覽器的方式)使用jQuery旋轉,請記住位置

JSFiddle

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)'); 
     } 
    }); 
} 
+1

只需使用兩種不同類型和交換撥動他們用jQuery。 –

+0

你想要左側或右側圖像旋轉? – Illaya

+0

你是什麼意思Paulie_D?我沒有問題Illaya – WIRN

回答

1

您可以使用在jQueryRotator ...

,並使用js代碼...

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

和工作小提琴是... http://jsfiddle.net/se4xc/ 希望這會給你造成。

+0

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

+0

@WIRN它的好享受編碼! – Illaya

0

對不起,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