1
我正在嘗試編寫一個jQuery大小可調的幻燈片。通過重新定義尺寸，我的意思是，只要屏幕重新調整大小，幻燈片元素就會重新調整大小。jquery加速動畫到最後並快點setTimeout下一張幻燈片
我有幻燈片工作的核心。但是，我希望在瀏覽器屏幕重新調整大小時加速當前的幻燈片動畫，然後快速將當前動畫設置時設置的最後一次setTimeout（即將調整元素調用當前窗口大小並設置動畫）開始。
現在，當屏幕重新調整大小時，當前幻燈片的動畫將以前一個窗口比率大小繼續。當這張幻燈片的動畫完成後，下一個動畫將以適當的大小加載。
你可以在這裏查看幻燈片的樣本（重新大小的窗口，以便更好地瞭解我試圖傳達的信息）：http://websonalized.com/myplugin/myplugin.php
這就是我所說的功能，以適應幻燈片的元素的功能，動畫和函數本身永無止境的循環：
function processslide(slide, slider_config, slide_original_fonts){
fitslide(slide, slider_config, slide_original_fonts);
animateslide.call(slide, slider_config, slide_original_fonts);
};
的功能：即上述所謂
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 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當前幻燈片是動畫的（回收函數），或者以不同的方式調用回收函數來達到相同的目的，當瀏覽器的屏幕重新調整大小時，這兩個都是。
fiuuuuuu ...謝謝你