jQuery动画切换到精确高度答案

【问题标题】：jQuery animate toggle to exact heightjQuery动画切换到精确高度
【发布时间】：2014-01-28 01:08:29
【问题描述】：

这是完美的工作

$('.closeme').click(function() {
    $('.mybox').animate( { height:"30px" }, { queue:false, duration:500 });
});

但是

如何切换回来？

(如果 height:"30px" 转到原来的高度大小) ?

这不是正确的 jquery 语法，只是为了理解：

$('.closeme').click(function() {
    if ! $('.mybox') = height:"30px" { 
        $('.mybox').animate( { height:"30px" }, { queue:false, duration:500 });
    }
    else {
        $('.mybox').animate( { height:"800px" }, { queue:false, duration:500 });
    }
});

【问题讨论】：

标签： jquery if-statement jquery-animate height toggle

【解决方案1】：

$('.closeme').click(function() {
    if ($('.mybox').height() != 30) {
        $('.mybox').animate( { height:"30px" }, { queue:false, duration:500 });
    } else {
        $('.mybox').animate( { height:"800px" }, { queue:false, duration:500 });
    }
});

DEMO

【讨论】：

是的！是的！是的！这正是我想要的！非常感谢！！！！！！！

【解决方案2】：

只需将原始高度存储在某处，data() 似乎是个好地方

$('.mybox').data('height', $('.mybox').height());

$('.closeme').on('click', function() {
    var flag = $(this).data('flag'),
        ani  = 30;

    if (flag) ani = $('.mybox').data('height');

    $('.mybox').animate( { height: ani }, { queue:false, duration:500 });

    $(this).data('flag', !flag);
});

FIDDLE

【讨论】：

【解决方案3】：

请看示例。在html中添加类试试吧。

$(".closeme").on("点击", function () {

    var moveHeight;
    var className = "addProperty";

    if ($('.mybox').hasClass(className)) {

        $('.mybox').removeClass(className);
        moveHeight = "30px";

    }
    else {

        $('.mybox').addClass(className);
        moveHeight = "800px";

    }

    $('.mybox').animate({ height: moveHeight }, 500);

});

【讨论】：

【解决方案4】：

工作小提琴：http://jsfiddle.net/patelmilanb1/6AVtH/

$('.closeme').click(function () {
    if ($(this).hasClass("showme")) {
        $('.mybox').animate({
            height: "500px"
        }, {
            queue: false,
            duration: 500
        });
        $(this).removeClass("showme").addClass("closeme").html("close me");
    } else {
        $('.mybox').animate({
            height: "30px"
        }, {
            queue: false,
            duration: 500
        });
        $(this).removeClass("closeme").addClass("showme").html("show me");
    }

});

【讨论】：

【解决方案5】：

这应该可以解决问题兄弟： $('.closeme').on('点击', function() { var flag = $(this).data('flag'), ani = 30;

if (flag) ani = $('.mybox').data('height');

$('.mybox').animate( { height: ani }, { queue:false, duration:500 });

$(this).data('flag', !flag);
});

【讨论】：