Блог

Я столкнулся с довольно простой, но раздражающей проблемой.

Я пытаюсь создать что-то вроде календаря «выбери дату», но в стиле карусели, точно так же, как те слайдеры изображений.

Как только пользователь нажимает на дату, <div> она должна прокручиваться к центру, и ее CSS изменяется, анимируется.

Я нашел этот слайдер с изображением, который именно то, что мне нужно: http://opiefoto.com/articles/photoslider (Демонстрация внизу)

Все, что я хотел сделать, это убрать большое изображение и кнопку воспроизведения / паузы и немного изменить CSS, пока что мне удалось сделать ЭТО:http://chadascinco.net/photoslider /

Люди, хорошо разбирающиеся в сбоях, вероятно, уже заметили, что … когда вы нажимаете на миниатюру, а затем на другую, предыдущая сохраняет свою прежнюю высоту, тем не менее, вы можете видеть, как она «щелкает», как будто что-то возвращает ее на эту высоту.

И в этом моя проблема.

Если вы проверите с помощью firebug или чего-то подобного, вы заметите, что высота УВЕЛИЧИВАЕТСЯ до 66 пикселей, но сразу после этого возвращается к 121 пикселю.

И теперь, по какой-то странной причине, если я уберу изменение значения «top», высота будет работать идеально. Он увеличивается и возвращается именно так, как мне нужно. Но если я верну его обратно … черт, вот так, сбой с высотой.

Я пытался связаться с автором по электронной почте, но прошло 3 дня, и я не получил ответа.

И здесь я прошу всех вас поделиться знаниями, я совсем новичок в JavaScript и jQuery, так что это также может быть проблемой в моем коде. Я просто попытался использовать базовую логику программирования.

Ответственный за js «photoslider.js » и если вы проверите наличие «FELIX Note», вы найдете примечания в каждой отдельной части, где я внес какие-либо изменения. Любые другие комментарии исходят от автора.

Строки, в которых выполняется переход, находятся в диапазоне от 265 до 287.

Если что-то из того, что я сказал, сбивает с толку, я был бы рад быть более точным.

Если вам, ребята, также нужно проверить исходный код, вы можете проверить это здесь: http://chadascinco.net/photoslideroriginal

Кроме того, если вы знаете какое-либо другое приложение, которое работает так, как мне нужно, я был бы очень благодарен узнать.

Еще раз спасибо всем вам.

РЕДАКТИРОВАНИЕ НОВОСТЕЙ БРЕНДА: я обнаружил один интересный факт: если вы проверите строки, о которых я упоминал, вы заметите 3 вызова анимации.

Что бы вы ни делали, если вы добавите одно и то же свойство CSS при ВТОРОМ вызове как для активного, так и для неактивного divs, оно щелкнет и вызовет этот сбой. Я попытался изменить «background-color» вместо height, изменив с черного на белый и наоборот.

Вот что произошло: когда я загружаю страницу, только активная страница становится черной. Хорошо. Но когда я нажимаю на другой, этот становится черным, а ПРЕДЫДУЩИЙ пытается стать белым, но вынужден снова стать черным. интересно, почему только второй вызов? Если бы это было первое, или последнее, или каждое из них, хорошо, но … только второе? Странно.

Эй, у меня проблема. Дело в том, что эта библиотека не ожидает, что вы будете использовать несколько анимаций одновременно. функция SKEL.EFFECTS.Slide.animate, которая запускает анимацию, создает поле в анимированном объекте, называемое skel_animate_id, которое фактически является идентификатором таймера, настроенного для выполнения анимации.

Поскольку эта библиотека не ожидает одновременного создания нескольких анимаций, при создании новой анимации это просто происходит element.skel_animate_id = setInterval(..... , и если вы следите за мной, вы поймете, что все, что было включено skel_aimate_id раньше (т. Е. единственная ссылка библиотеки на таймеры любой предыдущей анимации), теряется после этого назначения.

Теперь есть функция step, вызываемая таймерами, которая отвечает за распознавание окончания анимации и остановку самого таймера, но она делает это путем вызова 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 в виде массива и сохранял каждый интервал со ссылкой на анимированный атрибут, поэтому функция step указывает, какой интервал следует очистить.

в 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);
}
  

Я думаю, что это должно сработать, но я не могу протестировать это в своем браузере. Если мой код не совсем работает, я, должно быть, что-то пропустил, но я все еще уверен, что проблема в этом, вам просто нужно выяснить, как ее решить (или изменить libraries = D). Вы просто попробуйте мое предложение, дайте мне знать, как оно сработало.

Приветствия

РЕДАКТИРОВАТЬ: Я не мог ждать, поэтому я запустил JSFiddle для тестирования, и да, он работает с этими изменениями. Проверьте это.

ПРАВКА 2: Исправлена опечатка: в первом фрагменте кода по-прежнему ссылались на skel_animate_id вместо skel_animate_ids.

В спешке, чтобы удалить функциональность из слайдера, вы фактически уничтожили его, если вы можете простить мой язык:

 /* var sliderCaption = $(document.createElement('div'));
sliderCaption.addClass('photoslider_caption');

sliderDiv.append(sliderCaption);

var sliderNav = $('#' key ' .photoslider_nav').get(0);
if(sliderNav != null){
     //remove it
     $(sliderNav).remove();
} */

sliderNav = $(document.createElement('div'));
sliderNav.addClass('photoslider_nav');
  

Подсветка синтаксиса уже должна подсказать вам, что не так.Вы прокомментировали определение критической переменной в дизайне приложения.

Попробуйте, по крайней мере, разрешить все, что связано с sliderNav переменной, там. Это функциональность, которую вы пытаетесь имитировать.