1

topアプリケーションの上部パネルにデフォルトでプロパティを-80px設定して、その一部を除いて非表示にしようとしています。そして、ユーザーがその部分にマウスを置いたままホバーすると、再び下にスライドします。

問題は、このdivにがあり、ユーザーがマウスポインターを離してもtextbox、ユーザーがこれを入力しているときにdivが上にスライドしないようにしたいのtextboxですが、残念ながら、これを行う方法がわかりません。これが私のコードです。

index.html

<div id="taskInput">
    <div id="controllers">
         <input type="text" name="mainTask" id="mainTask">
         <button id="addMain">Add</button>
         <button id="resetMain">Reset</button>
    </div>       
</div>

この部分のcss：

#taskInput {
    background: red;
    width:606px;
    height:43px;    
    padding: 22px;    
    box-shadow: 0px 3px 4px -3px black;
    position: absolute;    
    z-index : 0;
    top:0px;
}

script.js

$(function(){
    $("#taskInput").delay(400).animate({top:-80}, 500,function(){});
    $("#taskInput").mouseover(
        function(){
            $(this).stop().animate({top:0}, 200, function(){});            
        });

    $("#taskInput").mouseout(function(evt){                    
        $(this).stop().animate({top:-80}, 200, function(){});           
    })

    $("#mainTask").focus(function(){
        //i though i can put something here to stop mouseout event or something
    })
})
4

6 に答える 6

2

コメントから気が変わったので、イベントのバインドを解除したり、グローバル変数を使用して追跡したりする必要はありません。document.activeElement次のように、ページ上で現在フォーカスされている要素を取得し、そのIDを自分のIDと比較するために使用できます<input>。

$("#taskInput").mouseout(function(evt){
    if(document.activeElement.id !== 'mainTask') {   
        $(this).stop().animate({top:-80}, 200, function(){});
    }            
});

ワーキングデモ

于 2012-08-24T14:57:02.267 に答える
1

トップへのアニメーションにフラグを追加し、フォーカス機能で変更します

私はこれをテストしていませんが、動作するはずです

$(function(){
  writing = false;
  $("#taskInput").delay(400).animate({top:-80}, 500,function(){});
  $("#taskInput").mouseover(
    function(){
        $(this).stop().animate({top:0}, 200, function(){});            
    });

  $("#taskInput").mouseout(function(evt){   
    if(writing == false){                 
       $(this).stop().animate({top:-80}, 200, function(){});           
    }
  })

  $("#mainTask").focus(function(){
    //i though i can put something here to stop mouseout event or something
    writing = true
  })

  $("#mainTask").focusout(function(){
    //i though i can put something here to stop mouseout event or something
    writing = false
  })

})
于 2012-08-24T14:51:26.063 に答える
1

jsFiddleデモ

最も簡単な方法は、＃mainTaskdata-focusにtrueに設定された属性を指定し、＃ mouseouttaskInputで実行するときに、slideUpをアニメーション化する前にFalseであることを確認することです。

$(function(){
    // ... code

    $("#taskInput").mouseout(function(evt){      
        console.log($('#mainTask').data('focus'));            
        if ($('#mainTask').data('focus') === false) {        
            $(this).stop().animate({top:-80}, 200, function(){});
        }            
    })

    $("#mainTask").on({
        focus: function(){
            $(this).data('focus', true);
        },  
        blur: function () {
            $(this).data('focus', false);
        }
    });
})

</ p>

于 2012-08-24T14:53:09.410 に答える
1

私は、これを試してみることもできると思います：

$('#taskInput').delay(400).animate({top:-80},500);

$('#taskInput').mouseover(function()
{
    $(this).stop().animate({top:0},200);            
});

$('#taskInput').mouseout(function()
{
    if(!$('#mainTask').is(':focus'))
    {
        $(this).stop().animate({top:-80},200);           
    }
});

デモ

編集：

これをコードに追加することもできます。

$('#mainTask').blur(function()
{
    $('#taskInput').stop().animate({top:-80},200);
});

デモ2

于 2012-08-24T15:09:34.277 に答える
0

$（ "＃mainTask"）。focusイベントハンドラーでは、グローバルブール変数をtrueに設定し、blurイベントハンドラーでfalseに設定し、＃taskInputmouseoutイベントハンドラーでその変数の値を確認できます。

var preventSlide = false;

$("#taskInput").mouseout(function(evt){                    
    if (!preventSlide) {
        $(this).stop().animate({top:-80}, 200, function(){});           
    }
})

$("#mainTask").focus(function(){
    preventSlide = true;
})

$("#mainTask").blur(function(){
    preventSlide = false;
})
于 2012-08-24T14:53:32.903 に答える
0 
$(function(){
    var flag=true;

    $("#taskInput").on('mouseenter mouseleave', function(e) {
        if (flag) $(this).stop().animate({top: e.type=='mouseenter'?0:-80}, 200);
    }).delay(400).animate({top:-80}, 500);

    $("#mainTask").on('blur focus', function(e) {
        flag=e.type=='blur';
    });
});​

フィドル

于 2012-08-24T14:57:11.137 に答える