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);
});
};
ANDDDDDDDDDDDDD ウィンドウのサイズ変更機能:
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 をトリガーするか (リサイクル関数)、別の方法でリサイクル関数を呼び出して、同じ目的を達成することを検討しています。これらは、ブラウザの画面のサイズが変更されたときです。
ふううう… ありがとう