Javascript jquery(this).parent.hasClass在动画中给出假阳性

Javascript jquery(this).parent.hasClass在动画中给出假阳性,javascript,jquery,css,Javascript,Jquery,Css,我使用CSS动画和jQuery在日历上打开多个翻盖。只要用户等待动画结束,然后单击下一个动画,效果就非常好。但是,当一个开始动画仍在运行,并且用户已经开始下一个动画时,脚本将中断,my classopend将从.fensterdiv中删除,窗口将中断布局 有人看到我的剧本哪里有问题吗 $(document).on(“单击“,”.flap',函数(){ if($(this.parent(“.fenster”).hasClass(“opend”)){ $(此).removeClass(“翻盖打开”

我使用CSS动画和jQuery在日历上打开多个翻盖。只要用户等待动画结束,然后单击下一个动画,效果就非常好。但是,当一个开始动画仍在运行,并且用户已经开始下一个动画时,脚本将中断,my class
opend
将从
.fenster
div中删除,窗口将中断布局

有人看到我的剧本哪里有问题吗

$(document).on(“单击“,”.flap',函数(){
if($(this.parent(“.fenster”).hasClass(“opend”)){
$(此).removeClass(“翻盖打开”).addClass(“翻盖关闭”);
$(this).one('webkitAnimationEnd-oanimationend-msAnimationEnd-animationend',函数(e){
$(this.next().hide();
$(此).removeClass(“flap_close”);
$(this.parent(“.fenster”).removeClass(“opend”);
});
}否则{
$(this.addClass(“flap_open”);
$(this.parent(“.fenster”).addClass(“opend”);
//$(此).removeClass(“flap_close”);
$(this.next().show();
}	
});
.fenster{
宽度:30%;
最小宽度:130px;
最大宽度:300px;
边框:1px实心rgba(212、212、212、1);
位置:相对位置;
左:200px;
z指数:200;
光标:指针;
}
.opend{
透视图:1500px;
-webkit透视图:1500px;
方框阴影:插入0px 0px 5px#2e2e;
光标:自动;
-webkit背面可见性:隐藏;
}
.皮瓣{
宽度:100%;
身高:100%;
z指数:100;
背景色:红色;
}
.皮瓣:以前{
内容:“;
显示:块;
垫面:75%;
}
.打开{
变换原点:0.50%;
-webkit转换源:0.50%;
背景尺寸:封面;
宽度:100%;
身高:100%;
z指数:100;
光标:别名;
动画:向前转4s;
-webkit动画:向前转4s;
盒影:5px 0px 5px 0px#2e2e;
}
.关闭{
变换原点:0.50%;
-webkit转换源:0.50%;
-webkit动画:祖马成4s转发;
动画:祖马臣4s前锋;
不透明度:0.8;
盒影:5px 0px 5px 0px#2e2e;
变换:旋转(-100度);
}
.按钮{
位置:绝对位置;
底部:2%;
左:15%;
宽度:70%;
高度:5vh;
最小宽度:80px;
最小高度:28px;
最大高度:20px;
z指数:-1;
文本对齐:居中;
显示:表格;
背景颜色:灰色;
}
@关键帧旋转{
到{
变换:旋转(-100度);
不透明度:0.8;
盒影:5px 0px 5px 0px#2e2e;
能见度:可见;
}
}
@-webkit关键帧旋转{
到{
-webkit变换:旋转(-100度);
-webkit不透明度:0.8;
盒影:5px 0px 5px 0px#2e2e;
能见度:可见;
}
}
@关键帧zumachen{
到{
变换:旋转(0度);
不透明度:1;
盒影:无;
能见度:可见;
}
}
@-webkit关键帧zumachen{
到{
-webkit变换:旋转(0度);
-webkit不透明度:1;
盒影:无;
能见度:可见;
}
}

某物
某物
我认为这是因为您告诉程序-“单击时,如果这有opend类,则执行一些操作、耗时、工作并删除opend类”,因为您在结束时删除了类。如果之前再次单击,程序不会到达该点。方法是使用其他指示器顶部检查状态。例如:

$( document ).on("click" , '.flap' , function(){
        if ($(this).parent(".fenster").hasClass("justEmptyClass")) {
            $(this).parent(".fenster").removeClass("justEmptyClass");
或者使用变量-false/rue设置和检查状态:

var open = true;
$( document ).on("click" , '.flap' , function(){
        if (open) {
            open = false;
//我想这是因为你告诉程序“点击时,如果这有opend类,那么做一些,花费时间,工作并删除opend类”,因为你在最后删除了类,如果之前再次点击,程序不会到达那个点。方法是使用其他指示器顶部检查状态。例如:

$( document ).on("click" , '.flap' , function(){
        if ($(this).parent(".fenster").hasClass("justEmptyClass")) {
            $(this).parent(".fenster").removeClass("justEmptyClass");
或者使用变量-false/rue设置和检查状态:

var open = true;
$( document ).on("click" , '.flap' , function(){
        if (open) {
            open = false;

//如果添加了指示动画正在运行的类,则可以运行检查以确保当前正在制作动画的元素不会受到对任何关闭元素调用的
.removeClass()
方法的影响

  • 向动画元素添加一个类,指示它处于 动画
  • 使用附加的
    .one()
    条件语句您可以再次删除上述类
    动画完成后
  • 在的第一个
    .one()
    方法中插入另一个条件检查 您的初始条件检查,以验证 问题没有类
    。动画正在运行
    ,因此指示 它应该删除必要的类
  • $(document).on(“click”,“.flap”,function()){
    if($(this.parent(“.fenster”).hasClass(“opend”)){
    $(此).removeClass(“翻盖打开”).addClass(“翻盖关闭”);
    $(this).one('webkitAnimationEnd-oanimationend-msAnimationEnd-animationend',函数(e){
    if(!$(this.parent(“.fenster”).hasClass(“动画运行”)){
    /*只有当条件等于true时,才进入下一个代码块,
    *即:父级没有“动画运行”类,因此动画已完成
    */
    $(this.next().hide();
    $(此).removeClass(“flap_close”);
    $(this.parent(“.fenster”).removeClass(“opend”);
    }
    });
    }否则{
    $(this.addClass(“flap_open”);
    $(this).parent(“.fenster”).addClass(“opend动画运行”);/*用于指示动画正在运行的附加类*/
    $(this.next().show();
    /*只有动画完成后,才应删除指示类*/
    $(this).one('webkitAnimationEnd-oanimationend-msAnimationEnd-animationend',函数(e){
    $(this.parent(“.fenster”).removeClass(“动画运行”);
    });
    }
    });
    
    .fenster{
    宽度:30%;
    最小宽度:130px;
    最大宽度:300px;
    边框:1px实心rgba(212、212、212、1);
    位置:相对位置;
    左:200px;
    z指数:200;
    光标:指针;
    }
    .opend{
    透视图:1500px;
    -webkit透视图:1500px;
    方框阴影:插入0px 0px 5px#2e2e;
    光标:自动;
    -webkit背面可见性:隐藏;
    }
    .皮瓣{