带有过渡的 jQuery addClass hidden-xs

Question

我有一个 id 为“m”的 div，我想切换它的可见性，但仅适用于 bootstrap xs，对于其他尺寸，我希望它始终可见。

经过多次摆弄后，我在单击另一个 ID 为“mf”的 div 时从 div 中添加和删除 hidden-xs 类，这是可行的，但我无论如何都找不到进行过渡以使其看起来更平滑。我尝试添加 webkit 和 moz 过渡，我尝试过淡入淡出和淡入淡出，但没有任何效果，这是我的代码，有什么建议吗？

$('#mf').click(function(event){
   event.preventDefault();
   if ($('#m').hasClass('hidden-xs')){
   $('#m').removeClass('hidden-xs');
   }else{
   $('#m').addClass('hidden-xs');
   }
});

Answer 1

Jquery 也有一个method.toggleClass()，如果元素还没有它，它将添加它，如果元素有它，它将删除它。您可以尝试使用它，也许它会有所帮助。它还可以为您节省几行代码，您的功能可能只是

$('#mf').click(function(event){
   event.preventDefault();
   $('#m').toggleClass('hidden-xs');
});

编辑：更新：CSS 过渡不适用于 hidden-xs，因为它添加的 css 是 display: none 和 display 不可动画，您必须使用自己的类编写媒体查询并使用 opacity或 visibility 隐藏元素。

你的 CSS 是这样的：

#m {
       -o-transition: 1s ease;
       -ms-transition: 1s ease;
       -moz-transition: 1s ease;
       -webkit-transition: 1s ease;
       transition: 1s ease;
   }
@media (max-width: 767px) {
    .custom-hidden-xs {
        visibility: hidden;
    }
}

这是为你的 js 准备的：

$('#mf').click(function(event){
   event.preventDefault();
   $('#m').toggleClass('custom-hidden-xs');
});