jQuery: анимированный заголовок - PullRequest
Новая
       17

jQuery: анимированный заголовок

0 голосов
/ 13 мая 2010

Я ищу плагин jQuery, который может помочь мне в следующем:

У меня есть список изображений, которые я хочу использовать для заголовка, но они довольно большие (особенно высота), и я нене хочу изменять их размер, чтобы они подходили под мой маленький заголовок div.

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

Я просмотрел несколько плагинов, но так и не нашел тот, который может достичь того, что я ищу (возможно, я спрашиваюслишком много) но моего JS недостаточно для его самостоятельного создания.

Спасибо!

РЕДАКТИРОВАТЬ: Я решил пойти другим путем, основываясь на посте alexteg,а именно это: 

            $('#header_img img').hide();
            $('#header_img img').each(function(i) {
                $(this).show().animate({
                    opacity: 1.0,
                    marginTop: '-=' + ($(this).height() - $('#header_img').height())
                }, 5000, function() {
                    $(this).animate({
                        opacity: 0.0
                    }, 1000).hide();
                });
            });

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

Теперь я знаю, что могу сделать это с помощью обратных вызовов анимации, но я понятия не имею, как объединить это с каждым из них, которое я делаю для циклического перемещения по изображениям.В идеале это также продолжит цикл (первое изображение снова после последнего и т. Д.), Поэтому, если у кого-то есть идеи, это очень ценится!

Ответы [ 2 ]

2 голосов
/ 13 мая 2010

Плагин Cycle может хорошо смешивать.Если вы хотите, чтобы первое изображение было анимированным, вы можете использовать функцию .animate () с обратным вызовом, который активирует плагин цикла.Возможно, вам придется спрятать все, кроме первого изображения для первой анимации, затем показать их и активировать плагин цикла.

Для плагина цикла вы должны поместить изображения следующим образом: 

<div id="header"> 
    <img src="images/header_1.jpg" width="900" height="250" /> 
    <img src="images/header_2.jpg" width="900" height="250" /> 
    <img src="images/header_3.jpg" width="900" height="250" /> 
</div>

Затем вы можете сделать что-то вроде: 

$(document).ready(function(){
  $('#header img').hide();
  $('#header').animate({
    opacity: 1.0,
    marginTop: '-=250',
  }, 5000, function() {
    $('#header').cycle({
      fx:   'fade',
      speed:    3000,
      timeout:  7000
    });
  });
});

Затем вам также понадобится исходный CSS-код: 

#header {
    height: 250px;
    overflow: hidden;
}

#header img:first-child {
    margin-top: 250px;
}

Конечно, вам нужно настроить все имена, скорости, скорости и т. Д.. для ваших нужд.

0 голосов
/ 13 мая 2010

Мне нравится цикл, но я думаю, что этот может быть более элегантным для заголовка:

Nivo Slider от Dev7 http://nivo.dev7studios.com/

Но используйте CSS из alexteg , и вы также можете посмотреть на вырезку

http://www.w3schools.com/CSS/pr_pos_clip.asp

...