0

我正在使用循环 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)，并且效果很好。现在，我的问题是，如何通过更改上述淡入淡出的 javascript 以动画方式从上到下或从左侧到右侧弹跳我的标题（.data）。请帮我。

4

1 回答 1

0

弹跳效果是 jquery ui 自带的，所以不要忘记在你的页面中包含这个库。
我猜你可能会调用 effect() 方法来达到你想要的结果。可以设置 4 个选项来“反弹”效果：

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

您可以选择什么方向、距离和时间，但对我们来说最重要的是模式。我们将设置模式为“隐藏”而不是隐藏元素的淡出，而不是显示元素的淡入，我们将模式设置为“显示”。

这是方法的样子：

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

    }
于 2013-08-19T15:54:53.240 回答