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

【问题标题】：Animate.css doesnt work for Second clickAnimate.css 不适用于第二次点击
【发布时间】：2014-10-25 19:45:25
【问题描述】：

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

html:

<a class="thumbnail img-1"></a>
<a class="thumbnail img-2"></a>

<p class='back-end'>
<p class='front-end'></p>
<h1 class='dismiss pull-right'>&times;</h1>

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');
})

【问题讨论】：

应该和动画冲突有关，在添加其他动画相关的类之前，请尝试删除zoomIn和zoomOut类。

标签： jquery animate.css

【解决方案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');
    });

});

【讨论】：

谢谢兄弟。您的代码片段似乎很好。但我试过了。仍然没有运气。我该怎么办？？ :(
现在即使是第一次也没有动画
感谢 Venkata Panga 的帮助.. 我已经成功完成了！经过一些修改。多谢兄弟。我粘贴我的代码示例。

【解决方案2】：

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

【讨论】：

我试过这种方式 -- [code] $('.thumbnail').each(function(){ $(this).click(function(){ $('.back-end, .front-end,.dismiss').addClass('animated zoomIn').show(); }) $('.back-end,.front-end,.dismiss').removeClass('animated zoomIn'); }) [/code]

【解决方案3】：

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

标记：

<p class='back-end'>
    <p class='front-end'></p>
     <h1 class='dismiss pull-right'>&times;</h1>
</p>

<a class="thumbnail img-1"> image 1</a>
<a class="thumbnail img-2"> image 2</a>

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();
     });

});

【讨论】：