web-dev-qa-db-ja.com

jQueryの回転/変換

この関数を使用して回転し、特定のポイントまたは度で停止します。現在、要素は停止せずに回転します。コードは次のとおりです。

    <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>

ご協力いただきありがとうございます

jquerytransformrotation
21
Andrea

一度に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)'});
        }

});
_

.css()を.animate()に変更して、 jQueryで回転をアニメート にします。また、アニメーションの期間、5000を5秒間追加する必要があります。元の機能を更新して冗長性を取り除き、より多くのブラウザをサポートします...

_$(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 CSSアニメーションコードは、jQuery .animate()がCSS3 transforms。

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

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

36
Sparky

これは、rotate内に再帰関数があるためです。それは再び自分自身を呼び出しています：

// 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

    });
}

それははるかにきれいで、ほとんどのブラウザで動作します。

11
switz

クリックだけでtoggleClassを使用しないのはなぜですか？

js：

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

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;
    }

これをcssに追加することもできます。

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>
7
cpi

私は問題に対する何らかの解決策を思いつきました。 jqueryとcssが関係します。これはトグルのように機能しますが、要素の表示を切り替える代わりに、交互のクリックでプロパティを変更するだけです。 divをクリックすると、タグ付きの要素が180度回転し、もう一度クリックすると、タグ付きの要素が元の位置に戻ります。アニメーションの継続時間を変更する場合は、transition-durationプロパティを変更するだけです。

[〜＃〜] 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)'});
      }
  });

}）;

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

clearTimeoutは停止します

clearTimeout(t);

私はこれをAJAXで使用します

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