我有一个按钮可以触发转到网站的下一张幻灯片/部分。但是,在它在下一个面板中滑动之前,我希望按钮显示一个勾号以向用户显示他们选择的内容,然后加载到下一张幻灯片中。
这是我的 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);
});
});
最佳答案
.fadeIn()接受回调作为第二个参数。传入一个匿名函数,该函数将在动画完成后执行。
小心不要遇到上下文问题。
$('.pt-trigger').click(function() {
$(this).find('.tick').fadeIn('slow', function() {
//do stuff after the animation is complete
});
});
关于jQuery 延迟 data-goto 直到 fadeIn 完成,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22872129/