时间戳

首页 > 解决方案 > 点击时的Jquery动画高度删除元素

jquery - 点击时的Jquery动画高度删除元素

问题描述

我想将 div 的大小从 div 高度的 100% 调整为 50%。但是当我单击按钮时，div 动画但隐藏了。当我再次单击时，div 恢复为 100% 大小。

我想要的是，当我点击一个按钮时，div 将调整为 50%。然后我再次点击它可以调整到 100% 这是示例代码。

$("#abc").click(function () {
    $(".main-footer").slideToggle("slow");
    $('#map').toggle(function () {
        $(this).animate({
            height: "500px"
        }, 200);
    }, function () {
        $(this).animate({
            height: "100%"
        }, 200);
    });
});

标签： jquerybootstrap-4jquery-animate

解决方案

Toggle功能隐藏/显示元素。您必须检查 div 高度并根据它执行操作。

代码

 <div id="map" style="height:100px;background-color:red">Sample div</div>
 <input type="button" id="abc" value="ABC">

JS

$("#abc").click(function () 
{
     s = $('#map').css('height');
     if(s == '100px')
     {
        $('#map').animate({
           height: "50px"
        }, 200);
     }
     else
     {
         $('#map').animate({
             height: "100px"
         }, 200);
     }
});

推荐阅读