How do I make a paragraph reappear and stop the previous animation when the mouse unhovers an element?_问答_开发者

How do I make a paragraph reappear and stop the previous animation when the mouse unhovers an element?

开发者 https://www.devze.com 2023-03-23 02:53 出处：网络

相关专题：jquery

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://js开发者_如何学Cfiddle.net/LYPRV/1/

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 ..)

http://jsfiddle.net/2L5Ya/2/ use the normal fadeIn and fadeOUt functions of jquery