jQuery动画切换到精确高度

Posted 2023-05-08

【中文标题】jQuery动画切换到精确高度

【英文标题】：jQuery animate toggle to exact height

【发布时间】：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 );
    
);

【参考方案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);
);