необходимо перейти к концу эффекта исчезновения с помощью события onclick

0

Это немного странно, но я надеюсь, что вы, ребята, можете помочь.

У меня есть клиент, который запросил странную последовательность затухания анимации с объектами, которые затухают в/из, но также хочет кнопку, которая будет отменять анимацию и мгновенно перейти к завершенному состоянию.

В настоящее время это javascript, который я использую (jquery, конечно).

$("#finished-button" ).click(function() {
    $('#slide-1').fadeTo(1,.1);
    $('#slide-2').fadeIn(1);
    $("#slide-1" ).stop(); 
    $("#slide-2" ).stop();
    ;});
$(document).ready(function() { 
    $('#slide-1').delay(5000).fadeTo(5000,1).delay(11000).fadeTo(5000,.1);
    $('#slide-2').delay(21000).fadeIn(5000);   
;});

ключ "ID" готовой кнопки "div" - кнопка для перехода в законченное состояние, но это не работает. Что мне не хватает/что я ошибаюсь в синтаксисе? Спасибо, парни!

  • 0
    В обработчике кликов попробуйте .stop() вызовы .stop() прежде чем добавлять новые анимации.
  • 0
    Проверьте GSAP, это поможет вам с анимацией.
Показать ещё 2 комментария
Теги:
click
fadein

1 ответ

0
Лучший ответ

Сначала вы можете очистить animation queue, затем вы можете show эти элементы и установить свои окончательные свойства стиля с помощью .css().

Пытаться,

$("#finished-button" ).click(function() {
    $('#slide-1').stop().show().css('opacity','0.1');
    $('#slide-2').stop().show.css('opacity','1');
});

Или, как указано в @user2191572, вы можете использовать,

$("#finished-button" ).click(function() {
    $('#slide-1,#slide-2').finish();
});
  • 0
    Это вроде работает, но у меня все еще есть проблемы со стандартной анимацией сайта, оригинальными настройками задержек и затуханий, которые, кажется, работают одновременно.
  • 0
    @ user2983416 какие проблемы.? Вы можете объяснить.?
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню