使用 animate、addClass 和 RemoveClass 进行 div 大小更改

Question

这是我的第一个问题，如果我不够具体或有什么不对的地方，请随时告诉我！我想要一个 jquery 方法，它将所有 class "passive" 的 div 更改为高度 500 px 和 passive-->active，所以会有另一种方法改变高度回到 100px。前半部分工作正常，我更改了 class，但第二个动画不会发生。我在 html 中只有一个 div 和 class 被动。

$("document").ready(function(){

$(function() { 

$(".passive").click(function(){
$(this).animate({height:'500px'});
$(this).addClass("active");
$(this).removeClass("passive");    
});    


$(".active").click(function(){
$(this).animate({height:'100px'});
$(this).addClass("passive");
$(this).removeClass("active");
});   

});
});`

Answer 1

您正在尝试与 DOM 加载后添加的 class 进行交互。默认情况下，点击功能仅适用于加载时存在的元素。您可以使用事件委托或向元素添加基础 class。如果加个基class，可以简化点击功能

您可以使用 hasClass 执行 if/else 检查元素是否具有某个 class。此外，您可以将 if/else 块内的 $(this) 方法链接在一起。

$("document").ready(function() {

    $(function() {


        $("baseclassname").click(function() {
            if ($(this).hasClass('passive')) {
                $(this).animate({ height: '500px' });
                $(this).addClass("active");
                $(this).removeClass("passive");
            // $(this).animate({ height: '500px' }).addClass('active').removeClass('passive');
            } else {
                $(this).animate({ height: '100px' });
                $(this).addClass("passive");
                $(this).removeClass("active");
                // $(this).animate({ height: '100px' }).addClass('passive').removeClass('active');
            }
        });
    });

});

Answer 2

jQuery.animate() 成本高且起伏不定。只需切换 class 并使用 CSS 转换

即可获得更平滑的转换

.passive {  
  height:100px; 
  transition:height 1s;
}
.active { 
  height:300px;
}

Array
  .from(document.querySelectorAll('.passive'))
  .forEach(
    e => e.addEventListener(
           'click', 
           evnt => e.classList.toggle('active')  
    )
)

.container { display:flex; }
.container>div { 
  flex:1 auto;
}

.passive { 
  background-color:red; 
  margin:5px; 
  height:100px; 
  width:20px; 
  transition:height 1s;
}
.active { 
  height:300px;
}

<div class="container">
  <div class="passive" tabindex=1></div>
  <div class="passive" tabindex=2></div>
  <div class="passive" tabindex=3></div>
</div>

使用 animate、addClass 和 RemoveClass 进行 div 大小更改

Making a div change size with animate, addClass and RemoveClass

javascript

jquery

jquery-animate