Изменение направления jQuery width/height animation

Я только начал изучать, как анимировать с помощью jQuery, и у меня возникли проблемы с поиском решения (если таковое существует) с небольшой эстетической проблемой, которую я испытываю.Изменение направления jQuery width/height animation

Вот код, я работаю с:

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script> 

<script> 
$(document).ready(function(){ 
$(".cause_button").css("cursor","pointer"); 
$(".cause_button").on('mouseenter',function(){ 
    $(this).stop().animate({height:100, width:100, opacity:1.0}, "fast"); 
}); 
$(".cause_button").on('mouseleave',function(){ 
    $(this).stop().animate({height:75, width:75, opacity:.75}, "fast");s 
}); 
}); 
</script>

Это довольно просто парить в/из анимации на изображение с классом «.cause_button». Анимация работает хорошо, но расширяется ширина/высота вниз и вправо. Есть ли способ, которым я мог бы заставить изображение расширяться наружу во всех направлениях?

jsFiddle: http://jsfiddle.net/FHkw2/1/

PS: Я понимаю, что есть CSS3 альтернативы с использованием эффектов перехода, но они достигают того же результата, и, кажется, менее совместим с браузерами, так что я пытаюсь сосредоточиться на использовании JQuery для этого.

источник

2013-03-21 Kevin Ciminelli

Вы могли бы создать jsfiddle, чтобы проиллюстрировать эту проблему? – ITroubs

Абсолютно, вот он: http://jsfiddle.net/FHkw2/1/ Я заменил свои изображения кнопок некоторым базовым кругом img из Google. –

Изменить "верх" и "влево" атрибуты во aniomation:

$(".cause_button").on('mouseenter',function(){ 
    $(this).stop().animate({height:100, width:100, opacity:1.0, left: -13, top: -13}, "fast"); 
}); 
$(".cause_button").on('mouseleave',function(){ 
    $(this).stop().animate({height:75, width:75, opacity:.75, left: 0, top: 0}, "fast"); 
});

Проверить его здесь: http://jsfiddle.net/FjNy5/2/

И я рекомендую вам использовать на(), как документации пусть это сделать:

$(".cause_button").on({ 
    'mouseenter': function(){ 
     $(this).stop().animate({height:100, width:100, opacity:1.0, left: -13, top: -13}, "fast"); 
    }, 
    'mouseleave': function(){ 
     $(this).stop().animate({height:75, width:75, opacity:.75, left: 0, top: 0}, "fast"); 
    } 
});

Проверить его здесь: http://jsfiddle.net/ETu3A/

источник

2013-03-21 22:29:25

Отлично работает и спасибо за подсказку, я очень ценю помощь! –

Рад, что это поможет вам –

Попробуйте это:

$(document).ready(function(){ 
    $(".cause_button").css("cursor","pointer"); 
    $(".cause_button").css("position","relative"); // required for offset positioning 
    $(".cause_button").on('mouseenter',function(){ 
    $(this).stop().animate({ 
     left: -12.5, top: -12.5, 
     height:100, width:100, opacity:1.0}, "fast"); 
    }); 
    $(".cause_button").on('mouseleave',function(){ 
    $(this).stop().animate({ 
     left: 0, top: 0, 
     height:75, width:75, opacity:.75}, "fast"); 
    }); 
});

источник

2013-03-21 22:30:17 tcovo

Вы, вероятно, лучший результат, если вы установите кнопку display:absolute и обернуть его в контейнер элемента, который использует display:relative. Затем отрегулируйте левые и правые свойства css вашего элемента кнопки во время анимации. В таких ситуациях я предпочитаю устанавливать некоторые начальные стили на элементах для их «исходной позиции», а затем ставить css, который не изменяется в файле css.

Here is a jsfiddle, чтобы продемонстрировать эту идею и помочь проиллюстрировать эти моменты.

источник

2013-03-21 22:38:29 BumbleB2na

Изменение направления jQuery width/height animation

ответ

Смежные вопросы