Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/82.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
Javascript 如何同时执行计时?_Javascript_Jquery - Fatal编程技术网

Javascript 如何同时执行计时?

Javascript 如何同时执行计时?,javascript,jquery,Javascript,Jquery,我现在正在使用jquery创建排序函数 通过单击每个按钮,指定的内容将显示为缩放动画。 但是,当快速单击一些排序按钮时,某些内容的显示时间不正确 例如,如果在单击btn-sort03之后立即单击btn-sortAll,sort03内容出现得有点晚。 我怎样才能修好它们 $(函数(){ $('.sort btn li')。每个(函数(){ $(此)。单击(函数(){ 设btnname=$(this.attr(“class”).substring(4.toLowerCase(); 让classna

我现在正在使用jquery创建排序函数

通过单击每个按钮,指定的内容将显示为缩放动画。 但是,当快速单击一些排序按钮时,某些内容的显示时间不正确

例如,如果在单击
btn-sort03
之后立即单击
btn-sortAll
sort03
内容出现得有点晚。 我怎样才能修好它们

$(函数(){
$('.sort btn li')。每个(函数(){
$(此)。单击(函数(){
设btnname=$(this.attr(“class”).substring(4.toLowerCase();
让classname=';
classname+=btnname;//.+btnname
$('.sort content>div').hide();
setTimeout(函数(){//等待隐藏并避免第一个内容快速出现
如果(btnname=='sortall'){
$('.sort content>div').fadeIn(500);
}否则{
$('.sort content div:not(classname)').hide();
$(类名).fadeIn(500);
}
}, 100);
});
});
});
*{
保证金:0;
填充:0;
列表样式:无;
}
.排序btn{
显示器:flex;
}
.排序btn li{
宽度:100px;
文本对齐:居中;
边框:1px实心#333;
}
.对内容进行排序{
显示器:flex;
柔性包装:包装;
}
.sort content>div{
宽度:32vw;
利润率:.5vw;
背景:#9ad0e4;
动画:缩放。8秒放松;
}
@-webkit关键帧缩放{
0% {
变换:缩放(.5);
}
100% {
变换:比例(1);
}
}
@关键帧比例{
0% {
变换:缩放(.5);
}
100% {
变换:比例(1);
}
}

    btn-sort01 btn-sort02 btn-sort03
  • btn sortAll
sort01 sort03
sort03
sort03 sort02 sort02
sort02
sort02
sort02 sort01
sort01
sort01
sort01
sort01 sort03
sort03 sort01 sort01
sort01
sort01
sort01 sort02
sort02 sort01
sort01 sort03
您可以使用。它有两个参数:第一个参数清除排队的动画(通过多次单击),第二个参数结束它以开始下一个。将这两个选项设置为true并附加到
.fade()
之前的元素,如下例所示

$(函数(){
$('.sort btn li')。每个(函数(){
$(此)。单击(函数(){
设btnname=$(this.attr(“class”).substring(4.toLowerCase();
让classname=';
classname+=btnname;//.+btnname
$('.sort content>div').hide();
setTimeout(函数(){//等待隐藏并避免第一个内容快速出现
如果(btnname=='sortall'){
$('.sort content>div').stop(true,true).fadeIn(500);
}否则{
$('.sort content div:not(classname)').hide();
$(classname).stop(true,true).fadeIn(500);
}
}, 100);
});
});
});
*{
保证金:0;
填充:0;
列表样式:无;
}
.排序btn{
显示器:flex;
}
.排序btn li{
宽度:100px;
文本对齐:居中;
边框:1px实心#333;
}
.对内容进行排序{
显示器:flex;
柔性包装:包装;
}
.sort content>div{
宽度:32vw;
利润率:.5vw;
背景:#9ad0e4;
动画:缩放。8秒放松;
}
@-webkit关键帧缩放{
0% {
变换:缩放(.5);
}
100% {
变换:比例(1);
}
}
@关键帧比例{
0% {
变换:缩放(.5);
}
100% {
变换:比例(1);
}
}

    btn-sort01 btn-sort02 btn-sort03
  • btn sortAll
sort01 sort03
sort03
sort03 sort02 sort02
sort02
sort02
sort02 sort01
sort01
sort01
sort01
sort01 sort03
sort03 sort01 sort01
sort01
sort01
sort01 sort02
sort02 sort01
sort01 sort03