Question

我正在尝试实现一个jquery函数，通过鼠标提交按钮，我希望我的搜索输入类型出现，与slideToggle的效果相同。

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

的原因

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

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

这是我的Jquery代码：

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

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

非常感谢你的帮助！

Answer 1

将类分配给<input type="search" id="s"，然后将该类用作标志。每次，切换班级以跟踪状态，如;

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

这是工作小提琴http://jsfiddle.net/76y7czvz/3/

希望这有帮助。

Answer 2

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

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

这可以防止输入再次悬停时切换。

Updated Fiddle

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

2 个答案: