JQuery. Поворот изображения туда-обратно

490

24 ноября 2016, 10:01

Доброго времени суток! Не могу сообразить, как реализовать поворот картинки на 45 и -45 градусов непрерывано, то есть, картинка все время наклоняется то в одну, то в другую сторону. Пока только при наведении мыши реализовано:

<img id="image" src="4.png">
<script type="text/javascript">  
        $(document).ready(function(){  
            jQuery("#image").rotate({ bind:{  
                mouseover:function(){ $(this).rotate({animateTo:45}) },  
               mouseout:function(){ $(this).rotate({animateTo:-45}) }  
          }});       
        });  
</script>

Answer 1

Позволил себе чуть изменить код Abmin чтобы подходил по условию:

#me { 
  -webkit-animation: rotation 2s infinite linear; 
  padding: 20px; 
} 
@-webkit-keyframes rotation { 
  0% { 
    -webkit-transform: rotate(0deg); 
  } 
  50% { 
    -webkit-transform: rotate(90deg); 
  } 
  100% { 
    -webkit-transform: rotate(0deg); 
  } 
}

<img id="me" src="http://www.clker.com/cliparts/T/G/C/H/K/W/no-sign-th.png">

Answer 2

Сделал на CSS

#me { 
    -webkit-animation: rotation 2s infinite linear; 
    padding: 20px; 
    border-radius: 50%; 
} 
 
@-webkit-keyframes rotation { 
0%   {-webkit-transform: rotate(0deg);} 
25%  {-webkit-transform: rotate(45deg);} 
50%   {-webkit-transform: rotate(0deg);} 
75%  {-webkit-transform: rotate(-45deg);} 
100%   {-webkit-transform: rotate(0deg);} 
}

<img id="me" src="http://cliparts.co/thumbnail/5TR/Ka6/5TRKa6dXc.jpg">

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Jquery Validation не работает с Materialize

На странице где используется Materialize не работает Jquery Validation, после отключения materialize. min.

426

jQuery

Неекранированный текст

Я уже не знаю,что с этим делать. Мне надо достать содержимое пост в вордпресс и использовать его в джаваскрипте.

389

jQuery

Как добавить имитацию загрузки?

Есть input с типом файл, как добавить в данный скрипт возможно имитации загрузки? Есть ли для этого готовое решение, или нужно искать какой-либо...

416

jQuery

Почему $(this) не работает?

. ...

506