Эй, у меня проблема.Дело в том, что эта библиотека не ожидает, что вы будете использовать несколько анимаций одновременно.функция SKEL.EFFECTS.Slide.animate, которая инициирует анимацию, создает поле в анимированном объекте с именем skel_animate_id, которое фактически является идентификатором таймера, настроенного для выполнения анимации.
Поскольку эта библиотека не ожидает нескольких анимаций одновременно, когда вы создаете новую анимацию, она просто делает element.skel_animate_id = setInterval(....., и если вы следуете за мной, вы поймете, что все, что было skel_aimate_id before (то есть единственная ссылка библиотеки на таймеры любой предыдущей анимации) теряется после этого назначения.
Теперь есть ступенчатая функция, вызываемая таймерами, которая отвечает за распознавание, когда анимация закончиласьи остановите сам таймер, но он сделает это, вызвав clearInterval(element.skel_animate_id);, что, очевидно, очистит только таймер, связанный с последним анимированным атрибутом.
Короче говоря, когда вы вызываете анимацию второго атрибута (передпервый завершился), вы оставляете открытый таймер, который продолжает «анимировать» первый атрибут (т.е. устанавливает его в конечное значение).
РЕДАКТИРОВАТЬ: Прямая демонстрация исправлений.
ВИННЫЙ ПОКРЫТИЕ
Линии [488-531]
SKEL.EFFECTS.Slide = {
counter: 0,
fps: 50,
//handles the animation from an attribute to an attribute
animate: function(element,cssAttribute,from,to,duration,transition){
if(element.css('display') != 'block'){
element.skel_old_display = element.css('display');
}
//if there isn't a default transition set one
if(!transition){
transition = SKEL.Transitions.quadOut;
}
//cancel any current animation
// FELIX Note: I've commented this because when we had 3 transitions on the same element, this function would make only the first one to work.
//SKEL.EFFECTS.Slide.stop(element);
var startTime = new Date().getTime();
//IE doesn't support arguments, so make a function that explicitly calls with those arguments
element.skel_animate_id = setInterval(function(){
SKEL.EFFECTS.Slide.step(element,cssAttribute,from,to,duration,startTime,transition);
},(1000/SKEL.EFFECTS.Slide.fps));
return element.skel_animate_id;
},
//cancels any animation event
stop: function(element){
//console.log(this,element,element.skel_animate_id);
//console.log(element.skel_animate_id);
if(element.skel_animate_id){
clearInterval(element.skel_animate_id);
element.skel_animate_id = 0;
if(element.skel_old_display){
element.css('display',element.skel_old_display);
}
}
},
ВОЗМОЖНОЕ РЕШЕНИЕ
Я бы имел skel_animate_ids в виде массива и сохранял бы каждый интервал со ссылкой на анимированный атрибут, поэтому функция шага теперь определяет, какой интервал очистить.
в SKEL.EFFECTS.Slide.animate
if (!element.skel_animate_ids){
element.skel_animate_ids = new Object();
}
//IE doesn't support arguments, so make a function that explicitly calls with those arguments
element.skel_animate_ids[cssAttribute] = setInterval(function(){
SKEL.EFFECTS.Slide.step(element,cssAttribute,from,to,duration,startTime,transition);
},(1000/SKEL.EFFECTS.Slide.fps));
return element.skel_animate_ids[cssAttribute];
затем в SKEL.EFFECTS.Slide.stop
//cancels any animation event
stop: function(element,attribute){
if(element.skel_animate_ids[attribute]){
clearInterval(element.skel_animate_ids[attribute]);
delete element.skel_animate_ids[attribute];
if(element.skel_old_display){
element.css('display',element.skel_old_display);
}
}
},
и в SKEL.EFFECTS.Slide.step (строка 575)
if(finished){
SKEL.EFFECTS.Slide.stop(element,cssAttribute);
}
Я думаю, что это должно сделать, но я не могу проверить это в своем браузере.Если мой код не совсем работает, я, должно быть, что-то упустил, но я все еще уверен, что это проблема, вам просто нужно выяснить, как ее решить (или изменить библиотеки = D).Вы просто попробуйте мое предложение, дайте мне знать, как оно работает.
Приветствия
РЕДАКТИРОВАТЬ: Я не мог ждать, поэтому я взбил JSFiddle для проверки, и даработает с этими изменениями. Проверьте это .
EDIT2: Исправленная опечатка: все еще ссылалась на skel_animate_id вместо skel_animate_ids в первом бите кода.