We know the difference between display: none and visibility: hidden as we talked about it previously.
jQuery – Animation on Visibility
The fadeIn() and fadeOut() jQuery functions are very convenient to use but they does not allow us to add animation during the fadeIn and fadeOut process. So we have to do it with a slightly different way.
Initially we have a hidden div.
#show-me {
visibility: hidden;
opacity: 0.0;
position: relative;
}
And then we have a jQuery script which show the hidden element and the text will move from the left to the right during the fadeIn process.
$(document).ready(function() {
$('#show-me')
.css('visibility', 'visible')
.animate({opacity: 1.0, left: '100px'}, 2000);
});
This is the complete example.
<html>
<head>
<style type="text/css">
#show-me {
visibility: hidden;
opacity: 0.0;
position: relative;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#show-me')
.css('visibility', 'visible')
.animate({opacity: 1.0, left: '100px'}, 2000);
});
</script>
</head>
<body>
<div id="show-me">
<a href="http://eureka.ykyuen.info">Eureka!</a>
</div>
</body>
</html>
We can also use display instead of visibility.
<html>
<head>
<style type="text/css">
#show-me {
display: none;
opacity: 0.0;
position: relative;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#show-me')
.css('display', 'block')
.animate({opacity: 1.0, left: '100px'}, 2000);
});
</script>
</head>
<body>
<div id="show-me">
<a href="http://eureka.ykyuen.info">Eureka!</a>
</div>
</body>
</html>
Here is another example for fading out HTML element with animation.
<html>
<head>
<style type="text/css">
#hide-me {
position: relative;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#hide-me').animate({opacity: 0.0, left: '100px'}, 2000, setInvisible);
});
function setInvisible() {
$('#hide-me').css('visibility', 'hidden');
}
</script>
</head>
<body>
<div id="hide-me">
<a href="http://eureka.ykyuen.info">Eureka!</a>
</div>
</body>
</html>
Done =)
Reference: StackOverflow – How do you fadeIn and animate at the same time?
Eureka! 
One thought on “jQuery – Using animate() with fadeIn() or fadeOut() at the same time”