4

カスタムのトグル スライド アニメーションを作成しました。期待どおりに正常に動作しますが、最初のクリックでスライドしません。地図の矢印をクリックすると、トグル クラスが適用されますが、地図はスライドしません。さらに 2 回クリックするとスライドします。

私はjqueryを初めて使用し、多くのことを検索しましたが、解決策が見つかりません。コードは次のとおりです。

$('.map_btn').click(function() {
    $('.map_btn').toggleClass('toggle');

    $('.map_btn').on('click', function() {
        $('.map_wrapper').stop().animate({
            opacity: 1,
            height: 420
        });
    });
    $('.map_btn.toggle').on('click', function() {
        $('.map_wrapper').stop().animate({
            opacity: 0,
            height: 0
        });
    });
});

http://jsfiddle.net/h2fh6/

4

5 に答える 5

3

他の何かのためにクラスが必要でない限り、単に使用して.toggle()ください。

$('.map_btn').toggle(function() {
    $('.map_wrapper').stop().animate({
        opacity: 1,
        height: 420
    });
},function() {
    $('.map_wrapper').stop().animate({
        opacity: 0,
        height: 0
    });
});

この関数に toggleClickという名前を付けるべきだったと本当に思います。

于 2012-06-24T07:33:31.627 に答える
1

あなたはこれを試すことができます

$('.map_btn').toggle(function() {
 $('.map_btn').toggleClass('toggle');
$('.map_wrapper').stop().animate({
    opacity: 1,
    height: 420
});
},function() {
 $('.map_btn').toggleClass('toggle');
$('.map_wrapper').stop().animate({
    opacity: 0,
    height: 0
});
});​
于 2012-06-24T07:36:34.677 に答える
0

これが私の考えです。リコールされるセレクターのキャッシュ (および明らかなクロージャー スコープがあるため$(window).load();、そこに入れます) を使用すると、全体的なパフォーマンスが向上します。

アニメートしている場合は、キャッシュする必要があります。必ず。のような jQuery オブジェクトの再選択呼び出しで何度もアニメーション化しないでください$('.map_wrapper').stop().animate()。これは非効率的であり、DOM が変更されて現在の状態を見つける必要がある場合など、必要な場合にのみ実行する必要があります。

私のアプローチは、ボタンに が見つかったeffect場合、変数を新しい設定で切り替えるだけです。.toggleシンプルで信頼性があります。iframeGoogle マップからの読み込みに若干の遅延があるようです。jsFiddle 環境ではそれは避けられないかもしれません。

$(window).load(function(){
    var $mapbtn = $('.map_btn'),
        $wrapper = $('.map_wrapper');

    $mapbtn.click(function() {
        var $this = $(this),
            effect = { opacity: 0, height: 0 };

        $this.toggleClass('toggle');

        if ($this.is('.toggle')) {
            effect.opacity = 1;
            effect.height = 420;
        }

        $wrapper.stop().animate(effect);
    });
});

http://jsfiddle.net/userdude/h2fh6/21/

于 2012-06-24T07:51:55.277 に答える
0

現在のソリューションの問題は、クラスがどこかでめちゃくちゃになっていることと、同じ要素の別のハンドラー内にハンドラーをtoggleClass()ネストしたという事実です。click.map_btnclick

そのため、流れが少し混乱します。

あなたはこれを試すことができます、

$('.map_btn').toggle(function() {
    $('.map_btn').toggleClass('toggle');
    $('.map_wrapper').stop().animate({
        opacity: 1,
        height: 420
    });
}, function() {
    $('.map_btn').toggleClass('toggle');
    $('.map_wrapper').stop().animate({
        opacity: 0,
        height: 0
    });
});​

のみを使用.toggle()して、2 つの別々のメソッドを記述する必要がないようにします。

フィドル リンク - http://jsfiddle.net/h2fh6/20/

トグルについて詳しくはこちら

于 2012-06-24T07:53:34.213 に答える
0

以下のコードは、アイコン アニメーションで動作するはずです!

http://jsfiddle.net/epinapala/h2fh6/19/

$('.map_btn').toggle(function() {
    $('.map_btn').toggleClass('toggle');
    $('.map_wrapper').stop().animate({
        opacity: 1,
        height: 420
    });
},function() {
    $('.map_btn').toggleClass('toggle');
    $('.map_wrapper').stop().animate({
        opacity: 0,
        height: 0
    });
});

</p>

于 2012-06-24T07:42:07.273 に答える