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>

在.data下的html代码中，我有h4和p标签。滑块水平滑动和滑块上的标题（.data）效果很好，因为绝对位置在.data中，它工作正常。现在，我的问题是，如何通过更改上面的fadein和fadeout的javascript来自动地从上到下或左侧到右侧反弹我的标题（.data）。请帮我。

Answer 1

弹跳效果附带jquery ui，所以不要忘记在您的页面上包含此库。
我想你可以调用effect（）方法来实现你想要的结果。可以设置4个选项来“反弹”效果：

方向：效果的方向。可以是“向上”，“向下”，“向左”，“向右”。默认为“up”。
距离：反弹距离。默认值为20
模式：效果模式。可以是“显示”，“隐藏”或“效果”。默认为“效果”。
时间：时间反弹。默认值为5.

取决于你选择的方向，距离和时间，但对我们来说最重要的是模式。而不是隐藏元素的fadeOut，我们将模式设置为“隐藏”而不是显示元素的fadeIn，我们将模式设置为“show”。

方法如下：

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

如你所见，首先，我们选择“反弹”效果，然后使用一些可用选项进行数组，然后进行持续时间（在你的情况下是1200或1.2秒），最后一个是一个函数在效果结束后运行。

以下是快速jFiddle示例：弹跳如何与'show'和'hide'模式一起使用：http://jsfiddle.net/Z73P5/2/

因此，尝试使用此更改循环插件的'before'参数。希望它能奏效。

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);
        });

    }

如何改变循环jquery标题文本淡化，淡出弹跳效果？

1 个答案: