Используйте jQuery для скольжения в текстовом поле при наведении курсора мыши на область

Question

Вопросы для новичков в jQuery.Скажем, у меня есть ярлык на веб-странице.Я хочу, чтобы эффект выдвигался из поля ввода при наведении мыши на ярлык.Любой намек на то, как собрать некоторую существующую поддержку jQuery для достижения этого?

Answer 1

Пример на 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;
}

Answer 2

Не видя никакого кода или 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'});

    }

});

Вам нужно добавитьположение относительно поля ввода.Вы также можете анимировать ширину поля ввода, если это необходимо.Это зависит от контекста использования поля ввода и метки.

Answer 3

При наведении на анимацию div, чтобы показать ввод:

$ ("# YourLabel"). Hover (function () {

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