jQuery的模糊动画 - 但只有当模糊以外的形式

2012-08-02 45 views 0 likes

我有一个搜索输入（#search_input），当聚焦时扩大。其他搜索选项弹出，允许我选择特定的搜索选项。jQuery的模糊动画 - 但只有当模糊以外的形式

输入应该在模糊后收缩，但只有当模糊在表单外触发时才会收缩。

现在我使用的太早收缩搜索输入，即使我只是从搜索选项菜单中选择一个选项，如下：

$(function() { 
    $("#search_input").focus(function(){ 
     $("#search_input").stop().animate({width: 310}, 200); 
     $("#search_options").show(); 
    }) 
    $("#search_input").blur(function(){ 
     $("#search_input").stop().animate({width: 100}, 200); 
     $("#search_options").hide(); 
    })   
});

把焦点/表单上的模糊事件不起作用。

如何告诉jQuery仅在#search_form之外发生模糊时发生模糊#search_input？

来源

2012-08-02 Horen

回答

您必须绑定到窗口的单击事件，否则你将无法如果用户正在失去一个div的焦点，以检测（实际上不具有焦点/模糊的事件！）

$(window).click(function(e) { 
     if (e.target.id != 'search_options' && e.target.parentNode.id != 'search_options' && e.target.id != 'search_input') { 
      $("#search_input").stop().animate({ 
       width: 100 
      }, 200); 
      $("#search_options").hide(); 
     } 
    });

http://jsfiddle.net/zMp9S/9/

来源

2012-08-02 13:23:18 VAShhh

这非常整齐。这会不会严重影响业绩？由于它监视窗口上的每一次点击...... – Horen 2012-08-02 13:29:19

那只是单个测试，您可以在e.target.id之前放置e.target.parentNode.id测试以获得0.000000000000000000000001毫秒的优势;否则它不是什么重型IMO – VAShhh 2012-08-02 13:37:27

好吧 - 谢谢！ – Horen 2012-08-02 14:56:08

jQuery的模糊动画 - 但只有当模糊以外的形式

回答

相关问题