Как изменить текст заголовка jQuery fadein, fadeout to bounce effect?

Question

Я использую цикл jquery как слайд-шоу для своего сайта. Это мой html-код.

<div class="slideshow_item"> 
    <div class="image"><a href="#"><img src="#"/></a></div> 
    <div class="data"> 
    <h4><a href="#">title1</h4> 
    <p>content</p> 
    </div> 
    </div> 

Ниже один мой код Javascript

<script> 
$(function() { 

// --------------------------------------------------- 
// Slideshow 1 

    $('#slideshow_1').cycle({ 
     fx: 'scrollHorz',  
     easing: 'easeInOutCirc', 
     speed: 700,  
     timeout: 5000, 
     pager: '.ss1_wrapper .slideshow_paging', 
     prev: '.ss1_wrapper .slideshow_prev', 
     next: '.ss1_wrapper .slideshow_next', 
     before: function(currSlideElement, nextSlideElement) { 
      var data = $('.data', $(nextSlideElement)).html(); 
      $('.ss1_wrapper .slideshow_box .data').fadeOut(1200, function(){ 
       $('.ss1_wrapper .slideshow_box .data').remove(); 
       $('<div class="data">'+data+'</div>').hide().appendTo('.ss1_wrapper .slideshow_box').fadeIn(1200); 
      }); 
     } 
    }); 

    // not using the 'pause' option. instead make the slideshow pause when the mouse is over the whole wrapper 
    $('.ss1_wrapper').mouseenter(function(){ 
     $('#slideshow_1').cycle('pause'); 
    }).mouseleave(function(){ 
     $('#slideshow_1').cycle('resume'); 
    }); 

// --------------------------------------------------- 

    $('a[href="#"]').click(function(event){ 
     event.preventDefault(); // for this demo disable all links that point to "#" 
    }); 

}); 
</script> 

В HTML коде под .data я есть h4 и р-теги. Ползунок отлично работает с горизонтальным слайдом и надписью (.data), которая течет по ползунку из-за абсолютного положения в .data и отлично работает. Теперь, мой вопрос: как отскочить подзаголовок (.data) сверху вниз или левую сторону вправо, анимируя, изменив приведенный выше javascript с помощью fadein и fadeout. Пожалуйста, помогите мне.

Answer 1

Эффект отскока поставляется с jquery ui, поэтому не забудьте включить эту библиотеку на свою страницу.
Я думаю, вы можете вызвать метод effect() для достижения желаемого результата. Возможно установить 4 варианта эффекта «отскока»:

Направление: Направление действия. Может быть «вверх», «вниз», «влево», «вправо». По умолчанию «вверх».
Расстояние: Расстояние до отскока. Значение по умолчанию: 20
Режим: Режим эффекта. Может быть «показать», «скрыть» или «эффект». Значение по умолчанию - «эффект».
Времена: Время отскока. Значение по умолчанию: 5.

Это зависит от вас, в каком направлении, расстоянии и времени выбрать, но здесь наиболее важным для нас является режим. Вместо fadeOut, который скрывает элемент, мы будем устанавливать режим «hide», а вместо fadeIn, который показывает элемент, мы установим режим «show».

Вот как метод выглядит следующим образом:

.effect("bounce", {mode: "hide", times: 4, direction: "up"}, 1200, function(){}); 

Как вы видите, в первую очередь, мы выбрали «отскок» эффект, а затем идет массив с некоторыми из доступных вариантов, а затем идет продолжительность (в вашем в случае его 1200 или 1,2 секунды), а последняя - это функция, которая запускается после окончания эффекта.

Вот быстрый jFiddle пример того, как работает с отскока «шоу» и режим «скрыть»: http://jsfiddle.net/Z73P5/2/

Итак, попробуйте изменить ваш «до» параметра плагин цикла с этим. Надеюсь, он сработает.

before: function(currSlideElement, nextSlideElement) { 

     var data = $('.data', $(nextSlideElement)).html(); 

     $('.ss1_wrapper .slideshow_box .data').effect("bounce", {times: 4, direction: "up", mode: "hide"}, 1200, function(){ 
      $('.ss1_wrapper .slideshow_box .data').remove(); 
      $('<div class="data">'+data+'</div>').hide().appendTo('.ss1_wrapper .slideshow_box').effect("bounce", {times: 4, direction: "down", mode: "show"}, 1200); 
     }); 

    }