Question

我想在触发事件时立即启动动画，例如在下面的代码中，悬停事件不是立即的，因此mouseout事件采取确保悬停事件已经完成，然后再启动它自己的...单词，我想在鼠标输出时立即终止悬停事件......我该如何解决这个问题？

<!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/

Answer 1

使用

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

演示http://jsfiddle.net/gaby/LYPRV/4/ （快一点，因为淡出一些文字的时间是5秒...... ）

Answer 2

http://jsfiddle.net/2L5Ya/2/使用jquery的正常fadeIn和fadeOUt函数

2 个答案: