Поиск эффекта jQuery для постепенного раскрытия скрытого DIV / изображения - PullRequest
Новая
       20

Поиск эффекта jQuery для постепенного раскрытия скрытого DIV / изображения

2 голосов
/ 11 декабря 2011

Может быть, я упускаю что-то очевидное, но я не могу понять, как медленно показать скрытое изображение / DIV, чтобы оно показывалось сверху вниз.

Если вы посмотрите наВ этом jsfiddle вы увидите изображение, которое я пытаюсь показать, используя 'show' в jQuery:

http://jsfiddle.net/nickharambee/Lj7z9/13/

Проблема с 'show' заключается в том, что он увеличивает изображение слева вверху.

То, что я ищу, - это эффект, который, мы надеемся, ясен из этих изображений:

enter image description hereenter image description hereenter image description hereenter image description hereenter image description here

т.е. красное «домашнее» изображение / DIV постепенно раскрывается сверху вниз, так что оно перекрывает коричневое «домашнее» изображение.

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

Спасибо,

Ник

ДОБАВЛЕННЫЙ КОД

HTML: 

<li id="test2"><img src="images/home3.png"></li>

CSS: 

li {
    background: url('images/sprite.png') no-repeat;
    background-position: 0px 0px;
    height: 40px;
}

СКРИПТ: 

$("li#test2").hover(
      function () {
        $(this).animate({
          'background-position-y': '-40'
        }, 500);
      },
      function () {
        $(this).animate({
          'background-position-y': '0'
        }, 500);
      }
    );

Ответы [ 4 ]

2 голосов
/ 11 декабря 2011

Поместите изображение при наведении курсора в div, который имеет этот класс стиля: 

.blind {
    height: 0px;
    overflow: hidden;
}

Это делает изображение невидимым, потому что его контейнер (div) имеет нулевую высоту, а его переполнение (все изображение) скрыто.

Тогда оживите div.blind так: 

$('.blind').animate({height: "40px"});

Теперь контейнер изображения достаточно велик для всего изображения при наведении. Изображение при наведении постепенно раскрывается сверху вниз.

У меня это работает: http://jsfiddle.net/cHt8V/1/

1 голос
/ 11 декабря 2011

Чтобы избежать этих мерцаний метода анимации jquery, я бы анимировал высоту контейнера «hover», вот так:

http://jsfiddle.net/Lj7z9/16/

0 голосов
/ 11 декабря 2011

Есть только 2 способа, которыми я могу придумать, и один создает анимированное изображение (которое вам не нужно). Другой способ вдохновлен старой домашней страницей youlove.us (они использовали белый png с прозрачностью, со словами «вырезано» из фона. Это было наложено на цветной фон, который постоянно прокручивался).

Вы можете адаптировать это, используя 3 деления с абсолютным позиционированием и подходящими значениями z-index, чтобы разместить их друг над другом: дно имеет серый фон на верхнем изображении вырезано слово «дом», поэтому серый цвет просвечивает середина - это то, что вы будете анимировать ... создайте div с красным фоном и анимируйте его, используя toggle () (или слайд и слайд, если хотите)

Надеюсь, это имеет смысл?

0 голосов
/ 11 декабря 2011

вы можете достичь этого, используя slideDown('slow') в jQuery для анимации.Вы можете управлять скоростью, используя slow или fast или normal в качестве параметра.

обновил скрипку: http://jsfiddle.net/Lj7z9/14/

...