Fade an element away during animation in jQuery

Description

The following code shows how to fade an element away during animation.

Example


<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {<!--  www.j ava2 s  . c  om-->
var winWidth = $(document).width();
var duration = 1000;
$(document).click(function(event) {
$("#alien").animate({
opacity : 0,
}, duration);
});
});
</script>
</head>
<body>
<div id="alien">java2s.com</div>
</body>
</html>

Click to view the demo

The code above generates the following result.

Fade an element away during animation in jQuery

Home »
  Javascript Tutorial »
    jQuery »
      jQuery Animation

...
Animate all form controls to slide up in jQ...
Animate div to slide up animation, completi...
Animate height in jQuery
Animate the first paragraph to fade to an o...
Animate with canvas element by changing its...
Cascade fade out animation in jQuery
Change left value when clicking in jQuery
Click to hide animation in jQuery
Click to show animation in jQuery
Click to slide up animation in jQuery
Control speed and callback for fadeOut in j...
Disable all animations globally in jQuery

Fade an element away during animation in jQ...

Fade an element in animation in jQuery
Fade fast to random in jQuery
Fade in controlled by milliseconds in jQuer...
Fade out Paragraphs in jQuery
Fade out a button in 2 seconds in jQuery
Fade out a button in jQuery
Fade out and call a function with callback ...
Fade out button in jQuery
Fade out in milliseconds in jQuery
Fade out one second in jQuery
Fade out show a div element in jQuery
Fade out to in milliseconds in jQuery
Fade to a certain opacity in jQuery
Fade to and call a function in jQuery
Fade to random seconds in jQuery
Fast fade in jQuery
Fast fade in in jQuery
Fast fade out a button in jQuery
Fast fade out in jQuery
Fast fade to in jQuery
Fast slide toggle animation in jQuery
Header fade in and fade out in jQuery
Hide and Slide down animation in jQuery
Hide and remove animation in jQuery
Hide fast animation in jQuery
...