Question

这完美地运作

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

BUT

如何切换回来？

（如果身高：“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 });
    }
});

Answer 1

只需将原始高度存储在某处，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

Answer 2

$('.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

Answer 3

请看一下这个例子。在html中添加类试试吧。

$（“。closeme”）。on（“click”，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);

});

Answer 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");
    }

});

Answer 5

这应该是诀窍兄弟： $（'。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);
});

jQuery动画切换到精确的高度

5 个答案: