jQuery rotate/transform

Question

私はこの機能を使って回転させ、ある特定の地点で停止したいと思います。今、要素は停止せずに回転します。ここでは、コードです：あなたの助け

Answer 1

ため

<script type="text/javascript"> 
    $(function() { 
     var $elie = $("#bkgimg"); 
     rotate(0); 
     function rotate(degree) { 

      // For webkit browsers: e.g. Chrome 
      $elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'}); 
      // For Mozilla browser: e.g. Firefox 
      $elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'}); 

      // Animate rotation with a recursive call 
      setTimeout(function() { rotate(++degree); },65); 
     } 
    }); 
    </script> 

おかげで単純時点で1度に回転し、永遠にスクリプトを呼び出す行を削除します。

// Animate rotation with a recursive call 
setTimeout(function() { rotate(++degree); },65); 

そして関数に所望の値を渡す...この例45に45度のため。

$(function() { 

    var $elie = $("#bkgimg"); 
    rotate(45); 

     function rotate(degree) { 
     // For webkit browsers: e.g. Chrome 
      $elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'}); 
     // For Mozilla browser: e.g. Firefox 
      $elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'}); 
     } 

}); 

animate the rotation with jQueryに順番に.animate()に変更.css()。また、アニメーションの時間を5秒間5000に追加する必要があります。そして

$(function() { var $elie = $("#bkgimg"); rotate(45); function rotate(degree) { $elie.animate({ '-webkit-transform': 'rotate(' + degree + 'deg)', '-moz-transform': 'rotate(' + degree + 'deg)', '-ms-transform': 'rotate(' + degree + 'deg)', '-o-transform': 'rotate(' + degree + 'deg)', 'transform': 'rotate(' + degree + 'deg)', 'zoom': 1 }, 5000); } }); 

...いくつかの冗長性を排除し、より多くのブラウザをサポートするために、あなたの本来の機能を更新するEDIT：どうやら、jQueryの.animate()はまだCSS3 transformsをサポートしていないため、上記標準のjQuery CSSアニメーションのコードが機能していません。

このjQueryプラグインは、回転をアニメーション化することになっている：

http://plugins.jquery.com/project/QTransform

Answer 2

あなたは回転の内側に再帰関数を持っているためです。

// Animate rotation with a recursive call 
setTimeout(function() { rotate(++degree); },65); 

これを取り除くと、再帰的に実行されません。

私もちょうど、代わりにこの機能を使用することをお勧め：

function rotate($el, degrees) { 
    $el.css({ 
    '-webkit-transform' : 'rotate('+degrees+'deg)', 
    '-moz-transform' : 'rotate('+degrees+'deg)', 
     '-ms-transform' : 'rotate('+degrees+'deg)', 
     '-o-transform' : 'rotate('+degrees+'deg)', 
      'transform' : 'rotate('+degrees+'deg)', 
       'zoom' : 1 

    }); 
} 

それは非常にクリーンだとブラウザのほとんどの量のために動作します。

Answer 3

クリックでトグルクラスを使用するだけではどうですか？

JS：

$(this).toggleClass("up"); 

CSS：あなたはまた、CSSにこれを追加することができます

button.up { 
    -webkit-transform: rotate(180deg); 
     -moz-transform: rotate(180deg); 
     -ms-transform: rotate(180deg); 
     -o-transform: rotate(180deg); 
      transform: rotate(180deg); 
       /* IE6–IE9 */ 
       filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9914448613738104, M12=-0.13052619222005157,M21=0.13052619222005157, M22=0.9914448613738104, sizingMethod='auto expand'); 
       zoom: 1; 
    } 

：

button{ 
     -webkit-transition: all 500ms ease-in-out; 
     -moz-transition: all 500ms ease-in-out; 
     -o-transition: all 500ms ease-in-out; 
     -ms-transition: all 500ms ease-in-out; 
} 

アニメーションを追加します。あなたはそれが回転が、停止したことがないと言っ

：

PS ...

はあなたの元の質問に答えます。 set timeoutを使用するときは、settimeoutを呼び出さない条件があることを確認する必要があります。それ以外の場合は、永久に実行されます。だからあなたのコードのために：

<script type="text/javascript"> 
    $(function() { 
    var $elie = $("#bkgimg"); 
    rotate(0); 
    function rotate(degree) { 

     // For webkit browsers: e.g. Chrome 
    $elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'}); 
     // For Mozilla browser: e.g. Firefox 
    $elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'}); 


    /* add a condition here for the extremity */ 
    if(degree < 180){ 
     // Animate rotation with a recursive call 
     setTimeout(function() { rotate(++degree); },65); 
    } 
    } 
    }); 
    </script> 

Answer 4

t = setTimeout(function() { rotate(++degree); },65); 

とclearTimeout私は問題を解決するためのいくつかの種類を思い付いたAJAX

success:function(){ clearTimeout(t); } 

Answer 5

でこれを使用

clearTimeout(t); 

を停止します。これにはjqueryとcssが含まれます。これはトグルのように機能しますが、要素の表示を切り替える代わりに、代わりのクリックでプロパティを変更するだけです。 divをクリックすると、タグが180度回転している要素が回転し、再度クリックすると、タグ付き要素が元の位置に戻ります。アニメーションの時間を変更したい場合は、トランジションの持続時間のプロパティを変更してください。

CSS

#example1{ 
transition-duration:1s; 
} 

jQueryの

$(document).ready(function() { var toggle = 1; 
    $('div').click(function() { 
     toggle++; 
     if ((toggle%2)==0){ 
      $('#example1').css({'transform': 'rotate(180deg)'}); 
     } 
     else{ 
      $('#example1').css({'transform': 'rotate(0deg)'}); 
     } 
    }); 

}）。