jQuery вращать / трансформировать

Question

Я бы хотел использовать эту функцию для поворота, а затем остановки в определенной точке или градусе. Прямо сейчас элемент просто вращается без остановки. Вот код:

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

Спасибо за вашу помощь

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

РЕДАКТИРОВАТЬ: Стандартный код анимации CSS jQuery выше не работает, потому что, очевидно, jQuery .animate() еще не поддерживает CSS3 transforms.

Этот плагин jQuery должен анимировать вращение:

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

Answer 2

Это потому, что у вас есть рекурсивная функция внутри 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

    });
}

Это намного чище и будет работать для большинства браузеров.

Answer 3

Почему бы просто не использовать 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 ...

, чтобы ответить на ваш оригинальный вопрос:

вы сказали, что он вращается, но никогда не останавливается,При использовании установленного тайм-аута вы должны убедиться, что у вас есть условие, которое не вызовет 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

Я придумал какое-то решение проблемы.Это включает в себя 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)'});
      }
  });

});

Answer 5

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

и clearTimeout до остановки

clearTimeout(t);

Я использую это с AJAX

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