UPDATE: Initially labeled as Mootools' child index refresh
Understanding the inner workings of Mootools can be a bit challenging, but it appears that when an element is removed from the DOM and then reinserted at the bottom of its container, the order of elements retrieved using methods like getNext() or getChildren()[0] may not align with the expected visual order in the HTML.
Below is the code where I am encountering an issue. Despite my efforts, I'm uncertain if the explanation above accurately identifies the root cause.
function slideNext() {
window.clearTimeout(sliderTimeout);
var slider = $('slider');
slider.set('tween', {duration: 500, onComplete: function(){
var slide = slider.getFirst('.block').clone();
slider.grab(slide, 'bottom');
slider.getFirst('.block').destroy();
slider.erase('style');
sliderTimeout = window.setTimeout(function(){slideNext();}, 5000);
}});
slider.tween('margin-left', 0 - slider.getSize().x);
}
UPDATE: Adding an alert(slide.get('html')); within the onComplete function provides some clarity. Interestingly, with each execution of the function, the number of alert dialogs increment unexpectedly, despite being intended to fire only once. This behavior suggests that recurrently setting slider.set('tween', {blabla}) leads to cumulative tweens, prompting me to suspect a potential issue with child indexing, which is ultimately disproven. The revised version below resolves the issue smoothly:
function slideNext() {
window.clearTimeout(sliderTimeout);
var slider = $('slider');
var myFx = new Fx.Tween('slider', {
duration: 500,
property: 'margin-left',
onComplete: function(){
var slide = slider.getFirst('.block').clone();
slider.grab(slide, 'bottom');
slider.getFirst('.block').destroy();
slider.erase('style');
sliderTimeout = window.setTimeout(function(){slideNext();}, 5000);
}
});
myFx.start(0, 0 - slider.getSize().x);
}
Could someone shed light on this behavior?