Question

我有一个按钮，可以触发进入网站的下一张幻灯片/部分。然而，在它滑入下一个面板之前，我希望按钮显示一个勾号，向用户显示他们所选择的内容，然后在下一张幻灯片中加载。

这是我的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;}

这也是fiddle。

更新：如何在幻灯片动画之前创建延迟？

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

Answer 1

.fadeIn()接受回调作为第二个参数。传入一个匿名函数，该函数将在动画完成后执行。

小心不要遇到上下文问题。

$('.pt-trigger').click(function() {
    $(this).find('.tick').fadeIn('slow', function() {
        //do stuff after the animation is complete
    });
});

Answer 2

您想要做的是在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.
    });
});

jQuery延迟数据 - 转到fadeIn完成

2 个答案: