Jquery повороты с условием

188
21 марта 2018, 04:21

Нужно чтобы rotate не переваливал за 360deg и при этом чтобы блок не вертелся в обратную сторону...

Пробывал реализовать вот так

$('.trub').click(function(){
    var number = true;
    var i = parseInt($(this).attr("data-deg"))+90;
    $(this).css("-webkit-transform","rotate("+i+"deg)");
    $(this).css("transition",".5s");
    $(this).attr("data-deg",i);
    // if (i > 270) {
    //          $(this).attr("data-deg","0");
    //   }
    var this1 = $(this);
    if (i == 360) {
        setTimeout(function(this1) {
                $(this1).css('transition', '0');
                $(this1).css("-webkit-transform","rotate(0deg)");

        },1000);
    }

i = текущий градус поворота this = блок который надо повернуть

тут описано - если поворот равен 360 ждем 1 секунду и переопределяем свойства css

А вот не работает( Помогите чем сможете.

Answer 1

У вас внутри таймаута this1 будет undefined, тк вы его не передали и переобъявили. 

$('.trub').click(function() { 
 
  var number = true; 
 
  var i = parseInt($(this).attr("data-deg")) + 90; 
  $(this).css("-webkit-transform", "rotate(" + i + "deg)"); 
 
  $(this).css("transition", "0.5s"); 
 
  $(this).attr("data-deg", i); 
 
  if (i == 360) { 
    setTimeout(function(elm) { 
      $(elm).css('transition', 'none'); 
      $(elm).css("-webkit-transform", "rotate(0deg)"); 
    }, 1000, this); 
  } 
});
.trub { 
  background: red; 
  width: 50px; 
  height: 50px; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="trub" data-deg="270"></div>

Answer 2

Попробуйте анимацию удалить так

$(this1).css('transition', 'unset');
READ ALSO
ajax отправить json и вернуть результат
jQuery

ajax отправить json и вернуть результат

Собираю с экрана все загруженные имена и возраста, собираю их в json и отправляю на сервер:

 231
Подгрузить JS после AJAX
jQuery

Подгрузить JS после AJAX

Есть страницаНа странице имеется блок с классом content - здесь подгружается AJAX содержимое

 205
ошибка при использовании query
jQuery

ошибка при использовании query

вот на такой пустячок

 195
не отправляются данные из formData
jQuery

не отправляются данные из formData

Не первый раз обращаюсь к formData уже, и каждый раз не получается, решил еще раз, ума не приложу, что сделал не так:

 219