Question

我的目标是显示和隐藏搜索表单和电话号码。当搜索表单可见时，切换应允许表单提交。它们不应该同时打开，因为它们都没有空间可以打开，所以我编写了接受回调函数的函数，除了两个事件似乎同时触发，忽略了这样的事实：他们应该等待第一个功能完成。

我做错了什么？我的代码粘贴在下面，但这里有一个fiddle来说明问题。可能还有更好的方法来写这个，所以我愿意接受建议。感谢。

//Functions for Search and Call
var closeSearch = function(callback) {
$('.searchbox').removeClass('open').addClass('notOpen').animate({
    width: '40px'
}, function() {
    $('.call').animate({
        width: '100%'
    }, function() {
        $('.call h4').fadeIn();
    });
    $('.search_bar').hide();
});
if (typeof callback == "function") {
    callback();
}
};
var openSearch = function(callback) {
    $('.searchbox').animate({
        width: '100%'
    }).addClass('open').removeClass('notOpen');
    $('.search_bar').animate({
        width: '100%'
    }).fadeIn();
    $('.search_bar #searchform .search-query').animate({
        width: '90%'
    });
    if (typeof callback == "function") {
        callback();
    }
};
var closeCall = function(callback) {
    $('.call').removeClass('open').addClass('notOpen')
    $('.call').animate({
        width: '60px'
    });
    $('.call h4').fadeOut();
    if (typeof callback == "function") {
        callback();
    }
};
var openCall = function(callback) {
    $('.call').animate({
        width: '100%'
    }, function() {
        $('.call h4').fadeIn();
    });
    $('.searchbox').addClass('notOpen');
    if (typeof callback == "function") {
        callback();
    }
};
// Search Box Toggle
$('.searchbox a').toggle(function() {
    if ($('.searchbox').hasClass('notOpen')) {
        closeCall(function() {
            openSearch();
        });
    } else {
        $('.search_bar #searchform').submit();
    }
}, function() {
    if ($('.searchbox').hasClass('notOpen')) {
        closeCall(function() {
            openSearch();
        });
    } else {
        $('.search_bar #searchform').submit();
    }
});
//Call Box Toggle
$('.call a').toggle(function() {
    if ($('.searchbox').hasClass('open')) {
        closeSearch(function() {
            openCall();
        });
    } else {
        openCall();
    }
}, function() {
    if ($('.searchbox').hasClass('open')) {
        closeSearch(function() {
            openCall();
        });
    } else {
        closeCall();
    }
});

Answer 1

由于动画本身需要一些时间来执行，因此它们会异步运行，从而提供自己的回调方法。

在你的脚本中，你在调用animate之后立即调用你的回调函数，所以你传递的函数立即被调用。你应该把你自己的回调函数调用到jQuery动画的回调函数中。

例如：

$('.searchbox').animate({
    width: '100%'
}, function(){
    //callback of the .animate-function
    if (typeof callback == "function") {
        callback();
    }
});

我快速编辑了你的小提琴，向你展示：http://jsfiddle.net/nsSxh/2/

我知道这不完美，但它应该让你知道该怎么做。

功能不接受回调

1 个答案: