Создание сайтов и программирование 
Здравствуйте ребята.
При помощи свойства "animate" в Jquery решила создать плавный поворот изображения на 6 градусов при наведении мыши.
Затем после того как мышь выйдет за рамки картинки, то картинка должна плавно возвращаться в исходное положение.
Но поворот картинки у меня не работает.
Подскажите пожалуйста где я допустила ошибку.
При помощи свойства "animate" в Jquery решила создать плавный поворот изображения на 6 градусов при наведении мыши.
Затем после того как мышь выйдет за рамки картинки, то картинка должна плавно возвращаться в исходное положение.
Но поворот картинки у меня не работает.
Подскажите пожалуйста где я допустила ошибку.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<img class="image1" src="zet1.jpg" alt=""/>
<img class="image2" src="zet2.jpg" alt=""/>
</body>
</html>
----------------------------------------------------------------.image1{
width: 30%;
margin-left: 12%;
height: 300px;
border: 8px solid white;
position: relative;
}
.image2{
width: 30%;
margin-left: 12%;
height: 300px;
transform: rotate(3deg);
border: 8px solid gray;
position: relative;
}
----------------------------------------------------------------$(document).ready(function(){
$('.image1').mouseenter(function(){
$(this).animate({'transform': 'rotate(6deg)' },500);
});
$('.image1').mouseleave(function(){
$(this).animate({'transform': 'rotate(0deg)' }, 500);
});
});
0 
0 
0  |  |  |
Комментарии (23)
Базовые jquery анимации, не поддерживаю НЕ ЧИСЛОВЫЕ значения. Можешь использовать функцию "step" внутри "animate":
$('.image1').mouseenter(function(){
$(this).stop().animate({
counter: 6
}, {
duration: 500,
step: function(now,fx) {
$(this).css('transform','rotate('+now+'deg)');
}
});
});
$('.image1').mouseleave(function(){
$(this).animate({
counter: 0
}, {
duration: 500,
step: function(now,fx) {
$(this).css('transform','rotate('+now+'deg)');
}
});
});
0 ответила dyus1
У этого решения есть баг((
Когда в браузере Google Chrome наводишь мышь на картинку.
То во время анимации границы(border) искривляются то есть становятся как лесница.
Плюс еще картинка увеличивается на пару пикселелей в ширину в правую сторону, а затем уменьшается когда картинка возвращается в исходное положение.
Вот результат с багом: https:/codepen.io/anon/pen/roeJRW
Когда в браузере Google Chrome наводишь мышь на картинку.
То во время анимации границы(border) искривляются то есть становятся как лесница.
Плюс еще картинка увеличивается на пару пикселелей в ширину в правую сторону, а затем уменьшается когда картинка возвращается в исходное положение.
Вот результат с багом: https:/codepen.io/anon/pen/roeJRW
0 ответила dyus1
При css hover другой баг.
Все рядом стоящие картинки временно теряют
качество изображения при анимации hover.
Я думаю, что дело в "transform".
Я нашла аналог "transform" это "animateTo:"
Что-то вроде этой функции:
Какую именно не могу сообразить(((
Все рядом стоящие картинки временно теряют
качество изображения при анимации hover.
Я думаю, что дело в "transform".
Я нашла аналог "transform" это "animateTo:"
Что-то вроде этой функции:
$('.image1').rotate({ bind:{
mouseenter:function(){ $(this).rotate({animateTo:6}) },
mouseleave:function(){ $(this).rotate({animateTo:0}) }
}});
Но в этой конструкции я опять допустила ошибку(((Какую именно не могу сообразить(((
0 Для добавления комментариев необходимо авторизоваться
Создание сайтов и программирование 
Небоскреб мечты
Построй свой город мечты, создай свой бизнес и стань...
