jQuery的動畫切換到精確的高度

這是工作完美jQuery的動畫切換到精確的高度

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

但

我怎麼切換回去？

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

來源

2014-01-09 masteringtaiwan

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

來源

2014-01-09 13:03:43 Turnip

是的！是的！是的！這正是我一直在尋找！謝謝SOOO了！ !!!!!! – masteringtaiwan

只存儲原始高度的地方，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

來源

2014-01-09 13:02:45 adeneo

工作小提琴：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"); 
    } 

});

來源

2014-01-09 13:05:17

這應該做的伎倆BRO：（ 'closeme '） $在（' 點擊'，函數（）{VAR 標誌= $（本）。數據。（'flag'）， ani = 30;

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

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

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

來源

2014-01-09 13:06:25 mayooran

請看一下這個例子。在html中添加類嘗試它。

$（「closeme 」）。在（「點擊」，函數（）{

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); 

});

來源

2014-01-09 13:07:27

jQuery的動畫切換到精確的高度

回答

相關問題