Skip to main content
inclui novas instruções
Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166

Com jQuery, você pode adicionar a class do Animated.css em uma função click.

Edit. Repare que editei a resposta e coloquei um setTimeout com um valor de 500, esse valor deve serNa documentação existem alguns métodos para verificar o valor do "tempo de duração"fim da sua animação, sendo assim quandoinclui na resposta essa opção para o carausuário poder clicar novamente ao final dae fazer a animação ela vai ser ativada. Da outra forma só funcionava no primeiro click.sempre que quiser (agradecimento ao sr. @dvd pela ajuda)

Veja o exemplo

$(document).ready(function () {
    $('".box'box").clickon(function"click", function() {
            var mvbox = $(this);
    var classes = "animated wobble";
    mvbox.addClass('animated wobble'classes);
        .on("animationEnd oAnimationEnd mozAnimationEnd webkitAnimationEnd", setTimeout(function(){
            mvbox.removeClass('animated wobble'classes);
            }, 500);
        });
});
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.box {
 cursor: pointer;
 display:inline-block;
 }
<link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"
    />
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

    <div class="box">
        <img src="http://placecage.com/100/100">
    </div>

        

Com jQuery, você pode adicionar a class do Animated.css em uma função click.

Edit. Repare que editei a resposta e coloquei um setTimeout com um valor de 500, esse valor deve ser o valor do "tempo de duração" da sua animação, assim quando o cara clicar novamente ao final da animação ela vai ser ativada. Da outra forma só funcionava no primeiro click.

Veja o exemplo

$(document).ready(function () {
    $('.box').click(function () {
            var mv = $(this);
            mv.addClass('animated wobble');
            setTimeout(function(){
            mv.removeClass('animated wobble')
            }, 500)
        })
});
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.box {
 cursor: pointer;
 display:inline-block;
 }
<link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"
    />
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

    <div class="box">
        <img src="http://placecage.com/100/100">
    </div>

        

Com jQuery, você pode adicionar a class do Animated.css em uma função click.

Edit. Na documentação existem alguns métodos para verificar o fim da animação, sendo assim inclui na resposta essa opção para o usuário poder clicar e fazer a animação sempre que quiser (agradecimento ao sr. @dvd pela ajuda)

Veja o exemplo

$(document).ready(function () {
$(".box").on("click", function(){
    var box = $(this);
    var classes = "animated wobble";
    box.addClass(classes)
    .on("animationEnd oAnimationEnd mozAnimationEnd webkitAnimationEnd", function(){
        box.removeClass(classes);
    });
});
});
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.box {
 cursor: pointer;
 display:inline-block;
 }
<link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"
    />
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

    <div class="box">
        <img src="http://placecage.com/100/100">
    </div>

        

adicionou 5 caracteres ao conteúdo
Fonte Link
Wallace Vizerra
  • 107,4mil
  • 106
  • 440
  • 920

Com jQueri vcjQuery, você pode adicionar a class do Animated.css em uma função click.click

Edit. Repare que editei a resposta e coloquei um setTimeout com um valor de 500, esse valor deve ser o valor do "tempo de duração" da sua animação, assim quando o cara clicar novamente ao final da animação ela vai ser ativada. Da outra forma só funcionava no primeiro click.

Veja o exemplo

$(document).ready(function () {
    $('.box').click(function () {
            var mv = $(this);
            mv.addClass('animated wobble');
            setTimeout(function(){
            mv.removeClass('animated wobble')
            }, 500)
        })
});
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.box {
 cursor: pointer;
 display:inline-block;
 }
<link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"
    />
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

    <div class="box">
        <img src="http://placecage.com/100/100">
    </div>

        

Com jQueri vc pode adicionar a class do Animated.css em uma função .click

Edit. Repare que editei a resposta e coloquei um setTimeout com um valor de 500, esse valor deve ser o valor do "tempo de duração" da sua animação, assim quando o cara clicar novamente ao final da animação ela vai ser ativada. Da outra forma só funcionava no primeiro click.

Veja o exemplo

$(document).ready(function () {
    $('.box').click(function () {
            var mv = $(this);
            mv.addClass('animated wobble');
            setTimeout(function(){
            mv.removeClass('animated wobble')
            }, 500)
        })
});
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.box {
 cursor: pointer;
 display:inline-block;
 }
<link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"
    />
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

    <div class="box">
        <img src="http://placecage.com/100/100">
    </div>

        

Com jQuery, você pode adicionar a class do Animated.css em uma função click.

Edit. Repare que editei a resposta e coloquei um setTimeout com um valor de 500, esse valor deve ser o valor do "tempo de duração" da sua animação, assim quando o cara clicar novamente ao final da animação ela vai ser ativada. Da outra forma só funcionava no primeiro click.

Veja o exemplo

$(document).ready(function () {
    $('.box').click(function () {
            var mv = $(this);
            mv.addClass('animated wobble');
            setTimeout(function(){
            mv.removeClass('animated wobble')
            }, 500)
        })
});
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.box {
 cursor: pointer;
 display:inline-block;
 }
<link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"
    />
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

    <div class="box">
        <img src="http://placecage.com/100/100">
    </div>

        

inclui novas instruções
Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166

Com jQueri vc pode adicionar a class do Animated.css em uma função .click

Edit. Repare que editei a resposta e coloquei um setTimeout com um valor de 500, esse valor deve ser o valor do "tempo de duração" da sua animação, assim quando o cara clicar novamente ao final da animação ela vai ser ativada. Da outra forma só funcionava no primeiro click.

Veja o exemplo

$(document).ready(function () {
    $("'.box"box').click(function () {
            var mv = $(this);
            mv.addClass('animated wobble');
            setTimeout(function(){
            mv.removeClass('animated wobble')
            }, 500);
        })
});
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.box {
 cursor: pointer;
 display:inline-block;
 }
<link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"
    />
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

    <div class="box">
        <img src="http://placecage.com/100/100">
    </div>

        

Com jQueri vc pode adicionar a class do Animated.css em uma função .click

Veja o exemplo

$(document).ready(function () {
    $(".box").click(function () {
        $(this).addClass('animated wobble');
    });
});
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.box {
 cursor: pointer;
 display:inline-block;
 }
<link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"
    />
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

    <div class="box">
        <img src="http://placecage.com/100/100">
    </div>

        

Com jQueri vc pode adicionar a class do Animated.css em uma função .click

Edit. Repare que editei a resposta e coloquei um setTimeout com um valor de 500, esse valor deve ser o valor do "tempo de duração" da sua animação, assim quando o cara clicar novamente ao final da animação ela vai ser ativada. Da outra forma só funcionava no primeiro click.

Veja o exemplo

$(document).ready(function () {
    $('.box').click(function () {
            var mv = $(this);
            mv.addClass('animated wobble');
            setTimeout(function(){
            mv.removeClass('animated wobble')
            }, 500)
        })
});
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.box {
 cursor: pointer;
 display:inline-block;
 }
<link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"
    />
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

    <div class="box">
        <img src="http://placecage.com/100/100">
    </div>

        

Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166
Carregando