jQuery:在“点击”上动画Div调整大小

时间:2011-09-04 01:52:33

标签: javascript jquery html css ajax

我有一个div用于向用户显示状态。它的宽度相对于百分比(0-100)。点击一个按钮,我想设置该div的宽度(以像素为单位)。关于最佳方式的任何输入?我已经在使用jQuery,我认为它会用它来制作动画片吗? (我的面板最初是隐藏的,因此是.live功能)。

$('#slider50').live("click", function() {

   // Animate here

    });

2 个答案:

答案 0 :(得分:29)

如PeeHaa所述,您可以使用.animate()jQuery函数扩展div的宽度,如下例所示:

http://jsfiddle.net/DKjKP/1/

$("#button").click(function() {
    $("#slider").animate({
        width: '+=30px'
    }, 1000);
});

答案 1 :(得分:3)

我认为一个简单的解决方案可能会有类似的东西:

$("#slider50").live("click", function() {
  $(this).slideDown();

  /*  or something like this
    $(this).animate({
      'width' : '500px',
      'height': '500px' 
    });
  */
 });

希望这有帮助