当鼠标悬停在某个区域上时，使用jQuery在文本框中滑动

Use jQuery to slide in a textbox when hovering mouse over an area

本文关键字：文本 jQuery 使用 悬停 鼠标 区域      更新时间：2023-09-26

新手jQuery问题。假设我在网页上有一个标签。当鼠标悬停在标签上时，我想要滑出输入框的效果。关于如何组装一些现有的jQuery支持来实现它，有什么提示吗？

jsFiddle上的示例。

HTML:

<div class="HasHiddenInput">
    <div>My label</div>
    <div class="HiddenInput">
        <input .../>
    </div>
</div>

Javascript：

$(function(){
    $('.HasHiddenInput').hover(
        function(){
            $(this).find('.HiddenInput').stop(true,true).slideDown();
        },
        function(){
            $(this).find('.HiddenInput').stop(true,true).slideUp();
        }
    );
});

可选CSS:

.HiddenInput{
    display:none; /*Initially hidden*/
}
.HasHiddenInput{
    padding: 5px;
    border: solid 1px #ccc;
}

悬停时动画显示div的输入：

$（"#YourLabel"）.hooper（function（）｛

  $("#DivWrappingInput").animate({
        width: 100,
    }, 500); 
});

在没有看到任何代码或CSS的情况下，很难说，但像这样的东西应该可以工作：

假设你的HTML是这样的：

<div>
    <div>
        <label>Label 1</label>
        <input />
    </div>
</div>
$(document).ready(function(){
    $('label').hover(function(){
      //Animate width to show the input box
      $(this).siblings('input').animate({'width':200 + 'px'});
    }, function(){
       //Animate width to hide input box
       $(this).siblings('input').animate({'width':0 + 'px'});
    }
});

您需要添加一个相对于输入框的位置。如果需要，也可以设置输入框宽度的动画。这取决于输入框和标签的使用上下文。

相关文章：