Как разместить элементы html при попытке анимации с помощью jquery?

Question

Я сделал кнопку для своего сайта, которая является div с фоновым изображением. Я анимировал эту кнопку с помощью jQuery, так что, когда мышь навешивает кнопку, она перепрыгивает 20px вправо, и когда мышь уходит, она возвращается к предыдущему местоположению.

Проблема, когда я приближать (Ctrl +прокрутки), вся анимация становится беспорядок. Кнопка быстро перемещается слева направо и, конечно, не там, где она должна быть.

Я использовал relative положение и блок пикселей для размещения элементов.

Как мне позиционировать вещи? absolute или relative? Пиксель или процент?

Answer 1

это article объяснить абсолютное и относительное, как они отличаются ?. моя практика, я первый wrap мой absolute с relative

пример:

HTML

<div class="wrap"> 
    <div class="content"> 
    </div> 
</div> 

CSS

.wrap { 
    float:left; 
    position:relative 
} 
.content { 
    position:absolute; 
    top:10px; 
    left:10px 
} 

Answer 2

Лучшее, что нужно сделать, это использовать только CSS. Это аккуратно и хорошо работает. Вот демо

http://jsfiddle.net/kevinPHPkevin/GyVTZ/

img { 
    margin-top:20px; 
} 
img:hover { 
    margin-top:10px; 
}