Mar*_*aRe 2 html javascript css jquery
我有个问题.我刚开始学习jQuery,这是我第一次使用javascript的经历.我想在点击上制作一个元素动画,我确实做到了:
HTML:
<h1>Testing</h1>
我正在使用Animate.css在点击时发生一些动画.这是我的jQuery:
$('h1').click(function (e) {
$('h1').addClass('animated bounce');
});
我想要实现的是,当我点击第二次时,动画再次发生,事实上,我想删除动画弹跳类并再次添加它,这样动画将再次发生.
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>
<body>
<h1>Testing</h1>
<script>
$('h1').click(function (e) {
$('h1').addClass('animated bounce');
});
</script>
</body>请告诉我,如果我按照应该的方式编写代码,我的意思是如果语法很好,我已经看到了带有$(this)的代码,我不确定那是什么,我也见过像.on('click')之类的东西
谢谢.
动画结束后,您需要删除CSS类.
$('h1').click(function() {
$(this).addClass('animated bounce').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
$(this).removeClass();
});
});<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<h1>Testing</h1>对于其他人,你的语法很好.
一些说明:
e是一个基于Event的对象,描述已发生的事件.这是可选的.如果您不需要事件中的数据,则可以跳过它.
$(this)是一个jQuery对象.在回调的上下文中,它是调用函数的元素.在JavaScript中,this关键字是一个非常重要且复杂的主题.你可以在MDN和SO中阅读它.
one() 是一个事件处理程序attacher,确保处理程序只执行一次.
on()是其他的传感器.看看这个其他的SO问题,以了解何时使用click()或on('click').