Menu
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.
280
asked Sep 01 '26 10:09
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.
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.
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.
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>
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.
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
