1

我正在尝试使我的应用程序的上面板具有默认top属性，-80px因此除了其中的一小部分之外它是不可见的。当用户将鼠标悬停在该部分上时，它会再次向下滑动。

问题是，这个 div 有一个textbox，我希望 div 在用户输入时停止向上滑动，textbox即使他将鼠标指针移开，但不幸的是不知道如何做到这一点，这是我的代码：

索引.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;
}

脚本.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 与 your 的 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

我想，你也可以试试这个：

$('#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 回答
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 演示

最简单的方法是将#mainTask 的data-focus属性设置为true，然后在执行mouseout#taskInput 时，确保在为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 回答
0

在 $("#mainTask").focus 事件处理程序中，您可以将全局布尔变量设置为 true，在 blur 事件处理程序中将其设置为 false，并在 #taskInput mouseout 事件处理程序中检查该变量的值

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 回答