使用鼠标悬停显示搜索输入类型

Question

我正在尝试实现一个 jquery 功能，通过鼠标点击提交按钮，我希望显示我的搜索输入类型，与 slideToggle 的效果相同。

我不想使用宽度切换，因为我不想在再次悬停我的提交按钮时隐藏我的搜索输入。这就是我使用 show();.

的原因

但效果并不完美，下边框移动了。如我在 JsFiddle 上的第一个示例所示。

我想要做的是具有与我的第一个 EXEMPLE 中相同的显示功能，但与我的 jsfiddle 上的第二个 EXEMPLE 中显示的效果相同。

这是我的 Jquery 代码：

$( "#searchsubmit" ).on( "mouseenter", function() {
$("#s").show("xslow");
});

$( "#searchsubmit_2" ).on( "mouseenter", function() {
$("#s_2").animate({width: 'toggle'}, "xslow");
});

非常感谢您的帮助！

Answer 1

将class分配给<input type="search" id="s"，然后使用class作为标志。每次切换 class 以跟踪状态，例如；

$( "#searchsubmit" ).on( "mouseenter", function() {
    if ( $("#s").is( ".a" ) ) {
        $("#s").show("xslow").removeClass("a").addClass("b");
    }else{
        $("#s").hide("xslow").removeClass("b").addClass("a");
    }
});

这是工作fiddlehttp://jsfiddle.net/76y7czvz/3/

希望对您有所帮助。

Answer 2

您可以选择使用 .one() 方法来实现：

$( "#searchsubmit_2" ).one( "mouseenter", function() {
    $("#s_2").animate({width: 'toggle'}, "xslow");
});

这将防止输入在再次悬停时切换。

Updated Fiddle

使用鼠标悬停显示搜索输入类型

using mouseover to show search input type

jquery

mouseover

show

toggle