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>