1

最初は非表示になっているラップ要素があります。クリックしたら、別の要素でトグルアニメーションを実行する前に、非表示の要素に表示クラスを追加する必要があります。次に、もう一度クリックすると、アニメーション化された要素はそのアニメーションを切り替えてから、そのクラスをラップから削除する必要があります。

これが私がこれまでに持っているものです。最初のクリックは正常に実行されます。クラスが追加され、アニメーションが実行されます。ただし、もう一度クリックすると、アニメーションは適切に実行されますが、完了すると、クラスは削除されません。

$(document).ready(function () { 
$('.search-btn').click(function() {
    if ($('.search-form-wrap').hasClass('hidden')) {
        $('.search-form-wrap').addClass('visible', function() {
            $('.search-form').blindLeftToggle('slow'); 
        });
    }
    else {
        $('.search-form').blindLeftToggle('slow', function() {
            $('.search-form-wrap').removeClass('visible'); 
        });
    }
});
});

これは、Blazemongerのコードに基づいて機能しているようですが、$('.search-form-wrap').hide();

$(document).ready(function () { 
$('.search-form-wrap').hide();
$('.search-btn').click(function() {
    if ($('.search-form-wrap').is(':hidden')) {
        $('.search-btn').toggleClass('active'); 
        $('.search-form-wrap').show();
        $('.search-form').blindLeftToggle('slow'); 
    } else {
        $('.search-form').blindLeftToggle('slow', function() {
            $('.search-form-wrap').hide();
        });
    }
});
});
4

1 に答える 1

1

それは、それをテストしているからです.hasClass('hidden')。クラスを追加/削除している場合は、代わりvisibleにテストする必要があります.not('.visible')。

アップデート

ただし、クラスを使用せずに要素が非表示か表示かをテストする場合は、クラスの代わりにセレクター:hiddenとセレクターを使用します。:visible

$(document).ready(function () { 
    $('.search-btn').click(function() {
        if ($('.search-form-wrap').is(':hidden')) {
            $('.search-form-wrap').show();
            $('.search-form').blindLeftToggle('slow'); 
        } else {
            $('.search-form').blindLeftToggle('slow', function() {
                $('.search-form-wrap').hide();
            });
        }
    });
});
于 2012-12-05T14:27:47.070 に答える