클릭하면 클래스 추가 및 애니메이션 수행 클릭, 다시 클릭 반복

Question

처음에는 숨김 요소가 있습니다. 일단 클릭되면 숨겨진 요소는 다른 요소에서 토글 애니메이션을 수행하기 전에 가시적 인 클래스를 추가해야합니다. 그런 다음 다시 한번 클릭하면 애니메이션 요소가 애니메이션을 토글 한 다음 랩에서 해당 클래스를 제거해야합니다.

여기까지 제가 지금까지 가지고 있습니다. 처음 클릭하면 정상적으로 수행됩니다. 클래스가 추가되고 애니메이션이 수행됩니다. 그러나 다시 클릭하면 애니메이션이 제대로 수행되지만 일단 완료되면 클래스가 제거되지 않습니다.

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

이 당신이 그것을 .hasClass('hidden') 경우 테스트하고 있기 때문이다 $('.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

의 추가와 함께, Blazemonger의 코드를 기반으로 작동하는 것 같다. visible 클래스를 추가/삭제하는 경우 .not('.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(); 
      }); 
     } 
    }); 
});