添加类并在单击时执行动画，再次单击时反转

Question

我有一个最初隐藏的 wrap 元素。单击隐藏元素后，需要添加一个可见类，然后才能在另一个元素上执行切换动画。然后再次单击，动画元素需要切换它的动画，然后从包装中删除所述类。

这是我到目前为止所拥有的。初始点击执行良好。添加类，并执行动画。但是再次点击动画会正常执行，但是一旦完成，类就不会被删除。

$(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();
        });
    }
});
});

Answer 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();
            });
        }
    });
});