0

我有一些在屏幕上提交操作的 jQuery 代码。但是，一旦事件结束，我就无法重复该动作。我尝试将.live()和附加.on()到代码上，但它不起作用。我不知道应该将哪个事件处理程序附加到选择器才能使其正常工作。代码如下。

$(document).ready(function() {
 $('#form1').hover(function(){
    $('#button1').css("display", "block");
    $(this).fadeIn(500);
    },
   function(){
    $('#button1').css("display", "none");
    $(this).fadeOut(500);}     
    );


<form action="" id="form1" method="post">
<textarea id="inputbox1"  name="what_i_do"></textarea>
<input type="submit" id="button1" value="Edit">
</form>
4

2 回答 2

1

当鼠标离开时，您会淡出表单$(this).fadeOut(500);，使其不可见，然后就无法再次将鼠标移到它上面。你需要重新考虑你想要做什么。

为了让一个对象接收鼠标事件，它不可能是display: none对象在fadeOut().

您可以将不透明度设置为零，使其不可见，但在页面中保留它的空间并且它仍然可以获取鼠标事件：

$('#form1').hover(function() {
    $('#button1').show();
    $(this).animate({opacity: 1}, 500);
},
function() {
    $('#button1').hide();
    $(this).animate({opacity: 0}, 500);
});

我还将按钮上的操作更改为.hide()，.show()因为它们是您正在执行的操作的快捷方式。

于 2012-08-19T04:54:06.207 回答
1

一旦使用 .fadeOut() 隐藏元素，就无法再触发悬停事件，因为元素本身是 display:none，它无法神奇地知道元素应该在哪里。

不要使用 .fadeOut，而是使用 .css('opacity', '0')，并使用 css3 创建动画。

Javascript：

$(document).ready(function() {
 $('#form1').hover(function(){
    $(this).css('opacity', '1');
    },
   function(){
    $(this).css('opacity', '0');
   });
});

CSS：

form {
   -webkit-transition: all 500ms ease-in-out;
   -moz-transition: all 500ms ease-in-out;  
   -o-transition: all 500ms ease-in-out;  
}​

这是一个 jsfiddle 示例：http: //jsfiddle.net/F2taJ/

于 2012-08-19T04:54:45.270 回答