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を呼び出した直後にコールバック関数を配置するため、渡された関数はすぐに呼び出されます。独自のcallback-functionの呼び出しをjQueryアニメーションのcallback-functionに入れる必要があります。

例えば：

$('.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 に答える