1

我想在焦点上做水平手风琴并在文本字段中聚焦。为了实现这一点，我使用了 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");
});

我该如何解决？

4

1 回答 1

0

在 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 所说，阻止鼠标点击对我们没有任何帮助:(

于 2013-07-25T10:51:06.893 回答