Animate.css doesnt work for Second click

后端 未结 3 1038
情深已故
情深已故 2021-01-25 03:48

If i click .img-1 or .img-2 first time it works. bt not in second time without page refresh. I am using Animate.css (zoomIn). Here is the code sample --

html:

         


        
相关标签:
3条回答
  • 2021-01-25 04:22

    See it in jsfiddle http://jsfiddle.net/oxu69Luw/

    Script would be like below:

    $(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');
        });
    
    });
    
    0 讨论(0)
  • 2021-01-25 04:24

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

    Markup :

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

    Script :

    $('.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();
         });
    
    });
    
    0 讨论(0)
  • 2021-01-25 04:28

    I am not 100% sure but I think you have to .removeClass first ... and then when you want to play the animation again you have to .addClass again

    0 讨论(0)
提交回复
热议问题