Jquery/ Animation reload when button clicked issue

StackOverflow https://stackoverflow.com/questions/23639235

Question

I have created a div element which has a fadein animation and the contents are loaded from another html page. I want the animation to reload every time the button is clicked.

The problem: after the button is clicked the contents from the loaded html page are generated again and doubling each time the button is clicked. As of now my code only works in IE.

I tried to empty the div contents when button is clicked but that appears to not be working.

p.s The loaded html page has noting but text.

Here is the html code. 

   <button>Hit</button>
   <div id="div1"> 
     <p class="fadein_element"></p>
    </div>

My Javascript code: 

$(document).ready(function(){
  $('button').on('click', function(){
    var heading = $('p').clone().removeClass();
    $('p').remove();
    $('#div1').empty();
   $('#div1').append(heading);
   $('p').load("about.html").addClass('fadein_element');
});

My css if needed: 

.fadein_element {
   animation: fadein ease-in 3s;  }

 @keyframes fadein {
     from { opacity:0; }
     to   { opacity:1; }
  }

I'm new to JS/jquery and any information will be helpful. Thanks.

Was it helpful?

Solution

I thought I'd help to attack this issue in segments...

But if you're looking to cut straight to the point, check out the JSBin that I created for this.

Javascript

The following snippet will allow you to perform redundant fadein animations when clicking the button without doubling up or breaking the fade logic.

$(document).ready(function () {
    $('#load').click(function () {
        $('.container')
            .html('')
            .append("<p></p>")
            .children().addClass('fadein_element')
            .load('/about.html');
    });
});

It's worth noting that for the purposes of scope and clarity, you shouldn't handle an event with such specific functionality at such a low level as attaching it to a tag. Use a class, id or relational tag to clear things up.

HTML

Taking from the aforementioned -- I'd suggest making subtle changes, such as the following.

<button id="load" type="button">Load</button>
<div class="container"></div>

There's no need to start with a p tag if changes made to it are indirect.

CSS

The issue you were seeing with your animation working only in IE was most likely caused due to the Layout Engine utilized by your browser. With browsers such as Chrome and Safari, a different engine, called Webkit is used. Though functionality between the engines can greatly differ, the naming conventions tend to stay relatively similar, in most cases this is seen with the addition of a prepended header; -webkit- for the Webkit engine, and -moz- for Gecko.

As an example, I've added the compatible styling needed for Chrome (and Safari).

.fadein_element {
    animation: fadein ease-in 3s;
    /* Webkit (Chrome/Safari) Compat. */
    -webkit-animation: fadein ease-in 3s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Webkit (Chrome/Safari) Compat. */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

Though I'm not a fan of the use of inline styling, below is an all-in-one working example.

<!DOCTYPE HTML>
<html>
    <head>
        <style type="text/css">
            .fadein_element {
                animation: fadein ease-in 3s;
                /* Webkit (Chrome/Safari) Compat. */
                -webkit-animation: fadein ease-in 3s;
            }

            @keyframes fadein {
                from { opacity: 0; }
                to   { opacity: 1; }
            }

            /* Webkit (Chrome/Safari) Compat. */
            @-webkit-keyframes fadein {
                from { opacity: 0; }
                to   { opacity: 1; }
            }
        </style>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $('#load').click(function () {
                    $('.container')
                        .html('')
                        .append("<p id='loadcontainer'></p>")
                        .children().addClass('fadein_element')
                        .load('/about.html');
                });
            });
        </script>
    </head>
    <body>
        <button id="load" type="button">Load</button>
        <div class="container"></div>
    </body>
</html>

OTHER TIPS

Try this

$(document).ready(function(){
$('button').off('click');  
$('button').on('click', function(){
    var heading = $('p').clone().removeClass();
    $('p').remove();
    $('#div1').empty();
   $('#div1').append(heading);
   $('p').load("about.html").addClass('fadein_element');
});

Also, it's better to add an event listener to an id or a class instead of an HTML element. Down the lane , if you have multiple buttons , this might become a problem.

I'd bet that the problem is related to the suggestion in this answer. load() will put the contents of the about.html page inside the div element. When the button is clicked, $('p') will contain ALL p elements on the page, not just one. This means that all p elements will subsequently react to the click, load more p elements...on and on and on.

I think it could be simplified to:

$(document).ready(function () {
  $('#button').off('click');
  $('#button').on('click', function () {
    $('#div1').empty();
    $('#div1').load("about.html");
  });
});

and the change the fadein_element css to:

.fadein_element * {
  animation: fadein ease-in 3s;
}

This will empty div1, load the about.html inside div1, and cause all children of div1 to fade. Forgive me, but I haven't tested in IE, because I don't have it available at the moment. Works great in Firefox though.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top