Javascript 如何进行3次jQuery回调_Javascript_Jquery_Css_Callback

Javascript 如何进行3次jQuery回调

javascript jquery css

Javascript 如何进行3次jQuery回调,javascript,jquery,css,callback,Javascript,Jquery,Css,Callback,我想按顺序执行三个功能。首先，放大一个对象，然后旋转360度，最后调整到放大前的大小。我可以做第一个和第二个，但我不知道如何做最后一个我如何使用jQuery回调来实现这一点？谁能给我一个工作的结构？我对jQuery非常陌生以下是我目前掌握的情况： <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">

我想按顺序执行三个功能。首先，放大一个对象，然后旋转360度，最后调整到放大前的大小。我可以做第一个和第二个，但我不知道如何做最后一个

我如何使用jQuery回调来实现这一点？谁能给我一个工作的结构？我对jQuery非常陌生

以下是我目前掌握的情况：

<html>
    <head>  
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script>
            $(document).ready(function() {
                $('#abc').click(function () {
                    $(this).animate({               
                        width: '+=90px',
                        height: '+=90px',
                        fontSize: '300%'
                    }, function(){
                        $(this).toggleClass('rotate');
                    });             
                   // add function -- resize to normal
                });
            });
        </script>
        <style>
            .rotate {       
                transition: all 0.7s;
                -webkit-transform: rotate(6.28rad);
                -ms-transform: rotate(6.28rad);
                transform: rotate(6.28rad); 
            }
        </style>

    </head>

    <body>  
        <div id="abc" style="border:1px solid;width:90px;">HTML / CSS</div>
    </body>

</html>


$（文档）.ready（函数（）{
$（'#abc'）。单击（函数（）{
$（此）。设置动画（{
宽度：'+=90px'，
高度：'+=90px'，
字体大小：“300%”
}，函数（）{
$（this.toggleClass（'rotate'）；
});             
//添加函数--将大小调整为正常值
});
});
.旋转{
过渡：所有0.7秒；
-webkit变换：旋转（6.28rad）；
-ms变换：旋转（6.28rad）；
变换：旋转（6.28rad）；
}
HTML/CSS

以下是我为您创建的实际链接。我已修改了您的代码：）

我使用了

CSS关键帧

来设置div元素的动画，并将

setTimeout

函数添加到jquery中，我已经估计了工作正常的时间：）

我很想建议使用

和一个删除动画类后

$（文档）.ready（函数（）{
//单击处理程序
$（'#abc'）。单击（函数（）{
//CSS动画！
$（this.addClass（“twist”）；
//移除动画后的类。。。
setTimeout（函数（）{
$（'abc'）.removeClass（“twist”）；
}，3000）；//与动画时间相同的延迟（3s）
});
});
#abc{
显示：内联块；
填充物：5px；
边框：1px纯黑；
}
.扭转{
动画名称：bigtwist；
动画持续时间：3s；
}
@关键帧bigtwist{
0%{
变换：缩放（1）旋转（0rad）；
}
30%{
变换：缩放（3）平移（50%，50%）旋转（0rad）；
}
70%{
变换：缩放（3）平移（50%，50%）旋转（6.28rad）；
}
99.9%{
变换：缩放（1）平移（0%，0%）旋转（6.28rad）；
}
100%{
变换：缩放（1）平移（0%，0%）旋转（0rad）；
}
}

HTML/CSS
这本身就是有效的，对吧？除了，似乎也有效和代码段中缺少的jQuery库。。。你的问题是什么？你知道我们仍然可以看到你之前编辑的内容，对吗？您已正确使用回调来执行3个步骤。。。所以澄清一下它到底出了什么问题或者其他什么问题。。。你的问题不清楚。我的意思是，当我尝试在回调中添加最后一个时，整个函数都不起作用。因此，我在我的代码中添加了注释“添加函数--调整大小为正常”，并请求帮助您是否希望它像这样工作？它在第二次单击时不工作。。。但我想你很接近了。这就是我想要的，谢谢你的帮助。但是，如果我再次单击它，它似乎不起作用，如何解决这个问题？我将addClass更改为toggleClass，但它看起来很奇怪。我修改了代码，只使用了css动画。很好用！请注意，transform
上的前缀是不需要的+1 ;)