Question

我想在焦点上做一个水平手风琴，并专注于文本场。为了实现这一点，我使用的是jQuery动画。它工作正常，但如果文本字段在完成动画之前失去焦点，则对齐变得不正确。所以我想阻止鼠标单击事件，直到完成jQuery函数/执行。

供您参考，这是我的代码：

$(".container-inline input[type=text]").focusin(function() {    
    $("#page-wrap").width("720px");
    $("#my_search").width("171px"); 
    $("#myDiv").animate( { width: "150px" },{queue: false, duration: 1000});
});

$(".container-inline input[type=text]").focusout(function(){
    $("#page-wrap").width("720px");
    $("#my_search").width("171px");
    $("#myDiv").width("88px");
});

我该如何解决？

Answer 1

jQuery中有一个名为promise的方法，可用于检查排队的动画是否已完成。它可以像下面那样使用

$("div").promise().done(function() {
  alert("Finished!");
});

否则我会建议你有一个标志变量来检查动画是否完成。如果动画没有结束，你可以通过检查标志变量来关注焦点。喜欢以下方式

var animationOver = false;
$(".container-inline input[type=text]").focusin(function() {    
    $("#page-wrap").width("720px");
    $("#my_search").width("171px"); 
    $("#myDiv").animate( { width: "150px" },{queue: false, duration: 1000});
    animationOver = true;
});

$(".container-inline input[type=text]").focusout(function(){
    if (!animationOver)
      return false;
    $("#page-wrap").width("720px");
    $("#my_search").width("171px");
    $("#myDiv").width("88px");
    animationOver = false;
});

正如iamkhush所说，阻止鼠标点击我们无法得到帮助:(

执行jquery函数时禁用鼠标单击事件

1 个答案: