顯示形式上使用jQuery

我使用jQuery做表格元素以下stuff-顯示形式上使用jQuery

我需要旁邊的表格單元格我點擊，一些動畫顯示的形式。

我的代碼的問題是，窗體只顯示一次，然後在任何更多的鼠標點擊它沒有。

的代碼是─

<script type="text/javascript"> 
$(document).ready(function(){ 

$("td").click(function(event) { 
    var div = $("#myform"); 
    div.css({ 
     position:"absolute", 
     top:event.pageY, 
     left: event.pageX}); 

    var delayTimer = setTimeout(function() { 
     $that.fadeIn("slow"); 
    }, 100); 

    div.mouseover(function(event) { 
    if (delayTimer) 
     clearTimeout(delayTimer); 
    }).mouseout(function(){ 
    if (delayTimer) 
     clearTimeout(delayTimer); 
    var $that = $(this); 
    delayTimer = setTimeout(function() { 
     $that.fadeOut("slow"); 
    }, 500)   
    }); 
}); 
}); 
</script> 
</head> 

<body> 
<table width="600" border="2" cellpadding="4"> 
    <tr> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    </tr> 
</table> 
<div id="myform"> 
<form> 
<input type="text" value="Arjun"/> 
<input type="submit" value="submit" /> 
</form> 
</div> 
</body> 
</html>

更多的解釋---- 上點擊任何TD手機，ID爲「myForm的」 div標籤應顯示..動畫

來源

2011-09-26 geeky_bat

你setTimout功能是指到$that但你沒有這樣的事情在該範圍：

var delayTimer = setTimeout(function() { 
    $that.fadeIn("slow"); // No $that exists here 
}, 100);

我想你的意思是說div.fadeIn：

var delayTimer = setTimeout(function() { 
    div.fadeIn("slow"); 
}, 100);

您還應該設置display: none上div你消失它或淡入不會做任何事情之前：

div.css({ 
    position: "absolute", 
    top: event.pageY, 
    left: event.pageX, 
    display: 'none' 
});

而在你的CSS初始化：

#myform { 
    display: none; 
}

現場演示：http://jsfiddle.net/ambiguous/dWYfD/

來源

2011-09-26 05:49:46

顯示形式上使用jQuery

回答

相關問題