Home/ Questions/Q 6185179
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T01:40:01+00:00

I want to make an animation start as soon as I trigger an event

  • 0

I want to make an animation start as soon as I trigger an event for eg in the following code the hover event is not immediate and hence the mouseout event takes ensures that the hover event has completed before starting its own..In other words,I want to terminate the hover event as soon as I mouseout on it…How can I fix this?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>JQuery(2)</title>
<style type="text/css">
.Test1{width:100px;}
</style>
<script type="text/javascript"  src="jquery.js">  </script>
<script type="text/javascript">

$(document).ready(function() {
$("h2").hover(function(){
    $(".Test1").animate({opacity:0},5000);
},
function(){
        //$(".Test1").stop();

         $(".Test1").animate({opacity:1},5000);
    })
});
</script>
</head>

<body>

<h2>Family Members</h2>

<p class="Test1">This is a textThis is a textThis is a textThis is a textThis is a textThis is a textThis is a textThis is a textThis is a textThis is a textThis is a textThis is a textThis is a textThis is a textThis is a textThis is a text</p>

http://jsfiddle.net/LYPRV/1/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Use 

    $("h2").hover(function() {
    $(".Test1").stop().animate({
        opacity: 0
    }, 5000);
}, function() {
    $(".Test1").stop().animate({
        opacity: 1
    }, 5000);
});

    demo at http://jsfiddle.net/gaby/LYPRV/4/
    (a bit faster, because 5 seconds to fade some text is to much ..)

    • 0