Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/83.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
jQuery延迟数据转到fadeIn完成之前_Jquery_Html_Css - Fatal编程技术网

jQuery延迟数据转到fadeIn完成之前

jQuery延迟数据转到fadeIn完成之前,jquery,html,css,Jquery,Html,Css,我有一个按钮,可以触发转到站点的下一张幻灯片/部分。但是,在下一个面板中滑动之前,我希望按钮显示一个勾号,向用户显示他们选择的内容,然后在下一张幻灯片中加载 这是我的HTML: <button class="pt-trigger" data-animation="1" data-goto="-1">Go to next page</button> 这是我的CSS: .tick { position: absolute; right: 5px; top: -2px; fo

我有一个按钮,可以触发转到站点的下一张幻灯片/部分。但是,在下一个面板中滑动之前,我希望按钮显示一个勾号,向用户显示他们选择的内容,然后在下一张幻灯片中加载

这是我的HTML:

<button class="pt-trigger" data-animation="1" data-goto="-1">Go to next page</button>
这是我的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);
        });   
    });
接受回调作为第二个参数。传入一个匿名函数,该函数将在动画完成后执行

注意不要碰到上下文问题

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

您要做的是在
勾选
动画的
回调
函数中设置页面动画

$('.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.
    });
});

谢谢,这就是我要找的。有没有一种方法可以让它查看按钮是否有div.tick,如果按钮中没有div.tick,它仍然会执行动画。要检查元素是否存在,可以执行以下操作:($('.myClass').length){…}非常感谢。我正在尝试在淡入发生后进行延迟。因此,滴答声逐渐消失,有一个延迟,然后下一部分滑入。我已经更新了我的代码谢谢,这就是我要找的。不过,我现在想看看是否有办法这样做,这样它就可以看看按钮是否有div.tick,如果按钮没有div.tick,它仍然会做动画。我已经搞定了。谢谢你的帮助,然后你会做:如果($(“.pt trigger”).has(“.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.
    });
});