0

我正在创建一个隐藏的联系表单，当鼠标位于元素上方时会出现该表单。这很简单，我通过以下方式实现了它：

$(document).ready(function(){   
  $(function (){
    $("#contact_1").hover(
      function(){ $(this).stop(true,false).animate({right:  0}, 500); },
      function(){ $(this).stop(true,false).animate({right: -218}, 500); });
  });
});

现在的问题是，当用户浏览输入元素或文本区域并开始编写他们的详细信息时，他们可能会将鼠标移出容器（很可能他们会这样做）。

在这种情况下，如何防止表单隐藏？

我猜想在“悬停”函数中添加一些条件函数（if/else），但我怎样才能获得当前的文本光标位置？

联系表格 ( #contact_1) 在 ID 内包含 4 个元素：#cf_name、#cf_email、#cf_phone、#cf_text

请注意：我想避免用户不得不点击“显示/隐藏”按钮

*可能是一个简单的查询，但我在任何地方都找不到明确的答案。

------------------------------

解决方案：

感谢下面的 Diodeus 帮助，我设法解决了这个问题：

每个输入都有onfocus/onblur动作：

<input type="text" id="cf_name" class="text" name="name" onfocus="allowcfhide=false;" onblur="allowcfhide=true;" />

修改了悬停脚本：

var allowcfhide=true;
$(document).ready(function(){   
  $(function (){
    $("#contact_1").hover(
      function(){ if (allowcfhide) $(this).stop(true,false).animate({right:  0}, 500); },
      function(){ if (allowcfhide) $(this).stop(true,false).animate({right: -218}, 500); });
  });
});
4

1 回答 1

0

在动画开始时有一个标志，这将导致它返回。当任何输入获得焦点时，设置标志。

于 2012-09-20T19:08:04.090 回答