Question

我正在使用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标签应显示..带动画

Answer 1

您的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/

鼠标上的显示形式使用jquery单击表元素

1 个答案: