1

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

我究竟做错了什么？我的代码粘贴在下面，但这里有一个演示问题的小提琴。可能还有更好的方法来写这个，所以我愿意接受建议。谢谢。

//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();
    }
});​
4

1 回答 1

2

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

在您的脚本中，您在调用 animate 之后立即放置回调函数，因此您传递的函数会立即被调用。您应该将自己的回调函数的调用放入 jQuery 动画的回调函数中。

例如：

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

我对您的小提琴进行了快速编辑以向您展示：http: //jsfiddle.net/nsSxh/2/

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

于 2012-12-06T22:10:04.887 回答