dimanche 26 février 2012
jQuery: fadeIn and fadeOut for IE8
Do you like this story?
If you have used jQuery fadeIn and fadeOut effects, you might have noticed that they don't always work on IE8.
There's a solution for that issue: in this very short article we are going to explore it.
I don't think I have to explain much about it, so I will get into it very quickly and shortly.
If we have an element to which we applied a fade effect using jQuery, we should have something like:
<div id="fading" style="display:none;">Some content</div>
in the body of our page.In the head we control the fade effect. In the following example we create the fadeIn effect on the click event (on some other element with id="sometrigger"):
<script type="text/javascript" language="javascript">
<!--
$(document).ready(function(){
$("#sometrigger").click(function(){
$("#fading").fadeIn();
});
// -->
</script>
If you test the above code in IE8, the div with id="fading" will just appear without the fading effect.In order to solve the issue, we just need to add a CSS rule to the fading div:
<div id="fading" style="display:none;filter:inherit;">Some content</div>
As you can see we added:filter:inherit;
The above rule will make the fading effect work on IE8 as well.Enjoy!
This post was written by: Franklin Manuel
Franklin Manuel is a professional blogger, web designer and front end web developer. Follow him on Twitter
Inscription à :
Publier les commentaires (Atom)
0 Responses to “jQuery: fadeIn and fadeOut for IE8”
Enregistrer un commentaire