jQuery, как сделать синхронную анимацию? - PullRequest
Новая
       9

jQuery, как сделать синхронную анимацию?

3 голосов
/ 22 июля 2010

У меня есть макет страницы, который выглядит примерно так 

|    image    ||    image    ||    image    |

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

|     image-hover     ||  image  ||  image  |

или 

|  image  ||     image-hover     ||   mage  |

или 

|  image  ||  image  ||     image-hover     |

Я использовал .animate({width: width}, speed) и все работает нормально.Но есть одна вещь, которая меня беспокоит, анимация не синхронная.В результате правая граница мигает взад и вперед.В середине анимации общая ширина примерно на 3 пикселя меньше, чем должна.

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

Если это имеет какое-либо значение, я использую divs с background-image и overflow: hidden;, обернутыми в li теги.Я делаю и li и div шире (тег li также содержит текст).

Актуальный вопрос:
Можно ли сделатьанимации синхронны, поэтому они происходят одновременно красиво и плавно?

Код: 

$(this).animate({width: 450}, 495)
    .parent("li").animate({width: 450}, 495)
    .next("li").animate({width: 225}, 500)
    .find(".class").animate({width: 225}, 500)
    .parent("li").next("li").animate({width: 225}, 500)
    .find(".class").animate({width: 225}, 500);

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

Ответы [ 2 ]

3 голосов
/ 22 июля 2010

Я думаю, вы имеете в виду проблему наращивание очереди . Попробуйте использовать метод stop перед методом animiate, например: 

$(...).stop().animate({width: width}, speed)

Подробнее:

http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup

Что касается плавной анимации, вы можете воспользоваться jQuery Easing Plugin .

1 голос
/ 22 июля 2010

В середине анимации общая ширина примерно на 3 пикселя меньше чем следовало бы.

попробуйте установить замедление на линейный.

...