0

私が基本的に達成しようとしているのはこれです：画像の上.header-logoにカーソルを合わせると、この画像がフェードアウトし、#header-searchテキスト入力フィールドがフェードインします。アイデアは、この#header-searchフィールドがアクティブな間、つまり入力している間は表示されたままになるか、ドキュメント内の他の場所をクリックするとフェードアウトするというものです。
ここに jsfiddle のデモがあります: http://jsfiddle.net/neal_fletcher/2SNf6/
HTML:

<img class="header-logo" src="http://placekitten.com/160/50" />
<input id="header-search" type="text" />

jQuery:

$(document).ready(function() {

    $('.header-logo').mouseenter(function() {
        $('.header-logo').stop(true, true).fadeOut();
        $('#header-search').stop(true, true).fadeIn();
        });

    $('.#header-search').mouseleave(function() {
        $('#header-search').stop(true, true).fadeOut();
        $('.header-logo').stop(true, true).fadeIn();
        });    
});

これはまったく可能ですか？それがどのように達成されるかはわかりません。どんな提案でも大歓迎です！

4

1 に答える 1

0

タイプミスです - .#header-search を #header-search に置き換えてください。また、それを機能させるために stop メソッドは必要ありません。

`$(document).ready(function() {

$('.header-logo').mouseenter(function() {
    $('.header-logo').fadeOut();
    $('#header-search').fadeIn();
    });

$('#header-search').mouseleave(function() {
    $('#header-search').fadeOut();
    $('.header-logo').fadeIn();
    });

});`

于 2013-11-07T22:03:23.910 に答える