1

My goal is to show and hide a search form and a call number. When the search form is visible, the toggle should allow the form to submit. They shouldn't be open at the same time because there isn't room for both of them to be open, so I've written the functions to accept callback functions except both events seem to fire at the same time, ignoring the fact that they should wait for the first function to complete.

What am I doing wrong? My code is pasted below, but here's a fiddle that demonstrates the problem. There may also be a better way to write this so I'm open to suggestions. Thanks.

//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();
    }
});​
2
  • 1
    Could you please explain more your problem ? Dec 6, 2012 at 22:07
  • The events ignore the callback and just fire at the same time. If you look at the JSFiddle, when I click on "Search", "Call" should wait until "Search" is done animating, but it doesn't. Dec 6, 2012 at 22:09

1 Answer 1

2

As the animations themselves need some time to execute, they run asynchronous, thus providing their own callback - method.

In your script, you put your callback-function right after calling animate, so your passed function is called immediatly. You should put the call of your own callback - function into the callback-function of the jQuery animation.

For example:

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

I made a quick edit to your fiddle to show you: http://jsfiddle.net/nsSxh/2/

I know it's not perfect, but it should give you an idea what to do.

4
  • wow, call and callback hell in that answer. feel free to edit, i can't think of good words right now ;)
    – GNi33
    Dec 6, 2012 at 22:13
  • Haha. I know! I think this will work. Let me try to get it working for all of them and I'll let you know / mark this as correct. Thanks for your help. Dec 6, 2012 at 22:15
  • Sweet. Worked like a charm. Dec 6, 2012 at 22:38
  • @ReLeaf glad i could be of service. it's always a good idea to have a look at the jQuery-API - docs, often gives you a hint what you can pass to a function and what you are missing
    – GNi33
    Dec 6, 2012 at 22:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.