jQuery задержка data-goto до завершения fadeIn

0

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

Вот мой HTML:

<button class="pt-trigger" data-animation="1" data-goto="-1">Go to next page</button>

Вот мой jquery:

$('.pt-trigger').click(function() {
        $(this).find('.tick').fadeIn('slow');
        $pageTrigger = $(this);
        Animate($pageTrigger);
    });

И вот мой CSS:

.tick {
position: absolute;
right: 5px;
top: -2px;
font-size:19px;
display:none;}

.pt-trigger {
background:none;
border: none;
font-size: 25px;
margin: 10px 0 10px;
padding: 15px 0px;
line-height: 40px;
cursor: pointer;
display: block;
font-family:Arial,sans-serif;
font-weight:normal;
border:1px solid #fff;
color:#fff;
width:262px;
text-align:center;
position:relative;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
float:left;}

Вот и скрипка.

Обновление: как создать задержку перед анимацией слайдов?

 $('.pt-trigger').click(function() {
         $(this).find('.tick').fadeIn(900, function() {
            $pageTrigger = $('.pt-trigger').delay(3000);
            Animate($pageTrigger);
        });   
    });
Теги:

2 ответа

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

.fadeIn() принимает обратный вызов как второй параметр. Передайте анонимную функцию, которая будет выполнена после завершения анимации.

Будьте осторожны, чтобы не столкнуться с проблемами контекста.

$('.pt-trigger').click(function() {
    $(this).find('.tick').fadeIn('slow', function() {
        //do stuff after the animation is complete
    });
});
Поделиться
  • 0
    Спасибо, вот что я ищу. Есть ли способ сделать это так, чтобы он смотрел, есть ли в кнопке div.tick, тогда, если в кнопке нет div.tick, он все равно выполняет анимацию.
  • 0
    Чтобы проверить наличие элемента, вы можете сделать if ($ ('. MyClass'). Length) {...}
Показать ещё 1 комментарий
0

То, что вы хотите сделать, - это оживить вашу страницу в функции callback вашей анимации tick.

$('.pt-trigger').on('click', function() {
    $(this).find('.tick').fadeIn('slow', function() {
        // I am a callback function
        // that runs after .tick loads
        // do animation now, etc.
    });
});
Поделиться
  • 0
    Спасибо, вот что я ищу. Однако теперь я хочу посмотреть, есть ли способ сделать это так, чтобы он посмотрел, есть ли внутри кнопки div.tick, тогда, если у кнопки нет div.tick, он все равно выполняет анимацию. убил это Спасибо за помощь
  • 0
    Тогда вы должны сделать: if ($ (". Pt-trigger"). Has (". Tick")) {// добавить и сделать анимацию} else {// сделать анимацию}

Ещё вопросы

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