1

我正在尝试编写一个 jQuery 可调整大小的幻灯片。通过调整大小，我的意思是只要调整屏幕大小，幻灯片元素就会调整大小。

我有幻灯片的核心工作。但是，我想在调整浏览器屏幕大小时加速当前的幻灯片动画，然后加快当前动画时设置的最后一个 setTimeout （将拟合元素调用到当前窗口大小并为它们设置动画）开始了。

现在，当屏幕重新调整大小时，当前幻灯片的动画会以之前的窗口比例大小继续。当这张幻灯片的动画完成后，下一个动画就会加载适当的大小。

您可以在此处查看幻灯片示例（重新调整窗口大小以更好地了解我要传达的内容）：http ://websonalized.com/myplugin/myplugin.php

这是我调用函数以适应幻灯片元素、动画和函数本身的函数，以实现永无止境的循环：

function recycle(){

    //this here is the slides array (i.e. $slides)              
    var this_duration = $(this[0]).data('duration') - 300;
    //prepare sizes and positions for all slide elements (i.e. background, and elements)
    processslide(this[0], slider_config, slides_original_fonts[0]);
    push.apply($slides, splice.call($slides, 0, 1));
    push.apply(slides_original_fonts, splice.call(slides_original_fonts, 0, 1));

    var next_slide = setTimeout(function(){ recycle.call($slides); }, this_duration);
    next_slide;

};

上面调用的函数：

        function processslide(slide, slider_config, slide_original_fonts){

            fitslide(slide, slider_config, slide_original_fonts);

            animateslide.call(slide, slider_config, slide_original_fonts);

        };

动画幻灯片的功能是：

function animateslide(slide_config, slide_original_fonts){

    var current_width = $('#' + slider_config.id).parent().width();
    var percent_difference = current_width/slider_config.slider_width;
    var current_height = slider_config.slider_height * percent_difference;

    var z_counter = 2;

    var slide = $(this);
    var background = $($(this).children('.slidebg'));
    var slide_default = {
        easing  : 'swing',
        duration: 500,
        squares : 125,
        transition : 'fade',
        speedIn: 1000,
        speedOut: 300,
        yInit: parseInt(background.css('top').replace('px', '')),
        xInit: parseInt(background.css('left').replace('px', ''))                   
    };

    var _config = $.extend({}, $(this).data(), background.data());
    $.each(slide_default, function(k, m){ if(_config[k] == ''){ _config[k] = m; } });

    _config = $.extend({}, slide_config, slide_default, _config);
    var elements = $(this).find('.slide_elements').children();
    var elements_default = {
        easing: 'swing',
        speed: 500,
        start: 500,
        travel: 'fade',
        y: 0,
        x: 0

    };

    var elements_cummulative_time = _config.speedIn;
    background.css('z-index', z_counter);
    z_counter++;

    background.animate({
        opacity: 1,
        top: _config.yTravel,
        left: _config.xTravel 
        }, _config.speedIn, _config.easing, function(){

            var background = $(this);

            $(elements).each(function(i){
                var element = $(this);
                element.css('z-index', z_counter);
                z_counter++;
                var element_configuration = element.data();
                $.each(elements_default, function(l, o){ if(element_configuration[l] == '') element_configuration[l] = o; });
                element_configuration = $.extend({}, elements_default, element_configuration);
                elements_cummulative_time = elements_cummulative_time + element_configuration.start;

                setTimeout(function(){
                    element.animate({
                        opacity: 1,
                        top: percent_difference*element_configuration.y,
                        left: percent_difference*element_configuration.x
                    }, element_configuration.speed, element_configuration.easing);
                       }, element_configuration.start); 

            });
    });

    setTimeout(function(){
        elements.animate({
            top: _config.yInit,
            left: _config.xInit
        }, _config.speedOut, _config.easing, function(){
            elements.each(function(){ $(this).css('z-index', 0)}); });

            //we remove the slide elements before we remove the background
    }, parseInt((_config.duration - 200) - _config.speedOut));

    setTimeout(function(){
        background.animate({
            top: _config.yInit,
            left: _config.xInit 
        }, _config.speedOut, _config.easing, function(){
            var currentTime= new Date();
            background.css('z-index', 0);
            fitslide(slide, slide_config, percent_difference, slide_original_fonts);
        });
    }, parseInt(_config.duration - _config.speedOut));

    $(window).resize( function(){
        console.log('STOPPING ELEMENTS');
        elements.stop(true);
        background.stop(true,true);
    });

};

ANDDDDDDDDDDDD窗口调整大小函数：

function debouncer( recycle, timeout) {

                var timeoutID , timeout = timeout || 100;

                return function () {

                    var scope = this , args = $slides;
                    timeoutID = setTimeout( function () {

                        recycle.apply( scope , Array.prototype.slice.call( args ) ); } , timeout );
                                }

            };

            $(window).resize( debouncer( function ( e ) {
                    // do stuff 
            }));

同样，我希望将当前的幻灯片动画加速到最后，或者触发在当前幻灯片动画后立即设置的 setTimeout（回收函数），或者以不同的方式调用回收函数以实现相同的结束，两者当浏览器的屏幕重新调整大小时。

呜呜呜……谢谢

4

1 回答 1

1

我只知道加速 jQuery 动画的两种方法：

  1. 将其停止在原处，.stop(true)然后以相同的终点再次启动，但持续时间要短得多。这似乎会加快最终结果的速度。

  2. 使用自定义缓动函数，您可以在条件要求时动态更改该函数。

第一个选项可能要容易得多。

clearTimeout()如果您已将计时器 ID 保存在持久变量中，则可以取消计时器。

于 2012-10-05T04:57:21.143 回答