Есть ли способ анимировать изображения с фиксированным положением с помощью функции jQuery animate? - PullRequest
Новая
       13

Есть ли способ анимировать изображения с фиксированным положением с помощью функции jQuery animate?

1 голос
/ 17 апреля 2011

У меня есть несколько ссылок на социальные иконки на боковой стороне моей веб-страницы, и они представляют собой позиции, использующие CSS position:fixed, поэтому они не перемещаются при прокрутке остальной части страницы.

Изображения значковимеют ширину 90px, и я также расположил их в основном за пределами экрана, так что только 15px из них будут видны до наведения мыши - тогда появятся остальные.Я выполняю это с помощью CSS и атрибута .hover, но они просто «выскакивают», делая это таким образом.

Я бы хотел, чтобы сглаживание выскользнуло, и мне кажется, это лучший способ сделать этобыло бы использовать функцию jquery animate, однако я абсолютно не знаю, как это сделать.

Вот CSS, который я сейчас использую для смещения изображений .... 

.floater-side-fb {
    position:fixed;
    bottom: 600px;
    right:-70px;
}
.floater-side-fb a:hover{
    position:fixed;
    bottom: 600px;
    right: -5px;
}

и HTML ... 

<div class="floater-side-fb">
<a href="http://www.facebook.com/" target="_blank"><img src="images/facebook-icon.png" /></a>
</div>

1 Ответ

4 голосов
/ 17 апреля 2011

Ознакомьтесь с документацией .animate(). 

$('.floater-side-fb').hover(function() {
    $(this).stop().animate({ 'right': '-5px' }, 'slow', 'linear');
}, function() {
    $(this).stop().animate({ 'right': '-70px' }, 'slow', 'linear');
});

NB. Сначала вы захотите удалить этот класс :hover в CSS.

...