Question

新手jQuery问题。说我在网页上有一个标签。我希望将鼠标悬停在标签上时滑出输入框的效果。有关如何组装现有jQuery支持以实现它的任何提示吗？

Answer 1

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;
}

Answer 2

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

$（ “＃YourLabel”）。悬停（函数（）{

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

Answer 3

没有看到任何代码或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'});

    }

});

您需要添加相对于输入框的位置。如果需要，您还可以为输入框的宽度设置动画。这取决于输入框和标签的使用环境。

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

3 个答案: