Animate.css不适用于第二次点击

如果我第一次点击.img-1或.img-2就可以了。 bt不是第二次没有页面刷新。 我正在使用Animate.css（zoomIn）。 这是代码示例 –

HTML：

  
 
 
× 

jQuery的：

 $('.img-1,.img-2').click(function(){ $('.back-end,.front-end,.dismiss').addClass('animated zoomIn').show(); }) $('.dismiss').click(function(){ $('.back-end,.front-end,.dismiss').addClass('animated zoomOut'); }) 

Answer 1

在jsfiddle http://jsfiddle.net/oxu69Luw/中看到它

脚本如下所示：

 $(function () { function applyZoomInOutAnim(x) { $('.back-end,.front-end,.dismiss').removeClass("zoomIn zoomOut").addClass(x + ' animated'); } $('.img-1,.img-2').click(function () { applyZoomInOutAnim('zoomIn'); }); $('.dismiss').click(function () { applyZoomInOutAnim('zoomOut'); }); }); 

Answer 2

我不是100％肯定，但我认为你必须先.removeClass …然后当你想再次播放动画时，你必须再次.addClass

Answer 3

http://jsfiddle.net/wahidsherief/e87dkpbf/1/

加价：

 
 
 
×
   image 1  image 2 

css：

 .back-end{position: absolute; width: 100%;height: 100%;background: rgba(0,0,0,.4); z-index: 600} .front-end {background: none repeat scroll 0 0 #fff;height: 65%;left: 16%;position: absolute;top: 22%;width: 68%;z-index: 1000;} .dismiss{color: black;z-index: 2000;background:red;padding: 30px 50px;font-size: 60px;cursor: pointer;} 

脚本：

 $('.back-end,.front-end,.dismiss').hide(); function applyZoomInOutAnim(x) { $('.back-end,.front-end,.dismiss').removeClass("zoomIn zoomOut").addClass(x +' animated'); } $('.thumbnail').click(function () { applyZoomInOutAnim('zoomIn'); $('.back-end,.front-end,.dismiss').show(); }); $('.dismiss').click(function () { applyZoomInOutAnim('zoomOut'); $('.back-end,.front-end,.dismiss').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){ $(this).hide(); }); });