Как анимировать изменения в CSS с помощью jQuery - PullRequest
Новая
       33

Как анимировать изменения в CSS с помощью jQuery

1 голос
/ 27 декабря 2008

Можно ли анимировать изменение в css с помощью jquery?

Если бы кто-то был так любезен, чтобы привести мне пример, я был бы очень признателен.

По сути, я пытаюсь анимировать технику спрайтов, манипулируя фоновым изображением в css с помощью jQuery. Цель состоит в том, чтобы анимировать наведение так, чтобы я получил хорошее затухание, а не просто резкое переключение, произведенное кодом ниже.

Вот где я нахожусь:

HTML: 

<h1 id="solomon">Solomon</h1>

CSS: 

body#default h1 {
text-indent: -9999px;
display: inline-block;
height: 213px;
}
body#default h1#solomon {
    background: transparent url(/images/S.gif) center top no-repeat;
    width: 183px;
    margin: 100px 0 0 216px;
    }

JQUERY: 

$(function() {
$('h1').hover(function() {
    $(this).stop().css('background-position', 'center bottom');
}, function() {
    $(this).stop().css('background-position', 'center top');
});
});

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

Благодаря тому, кто это сделает. :)

Я надеюсь, что кто-то может ответить на мой вопрос, не указывая мне учебник? Моя проблема с учебниками заключается в том, что все они заставляют меня изменить мой HTML, который я довольно заперт в данный момент.

также, почему функция animate не работает в моем примере (@CMS)?

спасибо всем за помощь! :)

Ответы [ 3 ]

3 голосов
/ 01 января 2009

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

Поскольку вы не можете изменить HTML, я предлагаю вам изменить разметку с помощью JavaScript, динамически вставив диапазон, который откроет новое изображение для вашего тега H1.

Я собрал рабочий пример на jsbin.com, в котором используется ваша разметка (т. Е. Только тег H1). Я использовал изображение из учебника jqueryfordesigners.com (поскольку оно мое), чтобы вы могли получить представление о необходимых вам изменениях CSS.

В частности, вам нужно стилизовать вложенный SPAN в H1, чтобы он был абсолютно позиционирован в H1, чтобы он мог постепенно исчезнуть:

http://jsbin.com/adike/ (для редактирования: http://jsbin.com/adike/edit/)

2 голосов
/ 27 декабря 2008

Эта статья поможет вам начать работу с Two Image Technique

[UPDATE]

Найден лучший учебник для вас: Эта статья покажет вам, как создать исчезающее изображение (например, логотип)

1 голос
/ 11 июня 2010

Вы должны использовать этот плагин для анимации фона:)

...