jQuery：动画部分调整'点击'

我有一个div用于显示用户的状态。其宽度相对于百分比（0-100）。点击一个按钮后，我想动画该div的宽度（以像素为单位）。任何关于这方面的最佳途径的意见？我已经在使用jQuery，我认为它会使用它来动画？（我的面板最初是隐藏的，因此.live功能）。jQuery：动画部分调整'点击'

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

    // Animate here 

    });

来源

2011-09-04 Zakman411

查看jQuery UI（http://jqueryui.com/）和'.animate（）'函数http://api.jquery.com/animate/。它会做你想做的。 – PeeHaa

@PeeHaa我不会建议整个用户界面库为单个元素设置动画，以及'.animate（）'在股票jQuery中可用。 – Bojangles

@JamWaffles：'.animate（）'有库存？这是从1.6开始的吗？ – PeeHaa

正如PeeHaa说，你可以使用.animate（）的jQuery

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

：如下图所示的例子功能扩展你div的宽度

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

来源

2011-09-04 02:03:54 Bassem

您可以使用jQuery特效[jQuery Effects文档]（http://api.jquery.com/category/effects/）来缓解特效，此外，此库还将$ .addClass（）/ $。removeClass（）函数扩展为允许在可用于更改宽度的样式更改之间进行转换。 – Bassem

有没有办法设置绝对宽度？ Like'width：400px' – Zakman411

当然，只需将“+ = 30px”替换为“400px”，这意味着它将从原始设置为400px的值创建动画。 '+ ='将永远增加你的X px或百分比。 – Bassem

一个简单的解决方案，我想会的工作将一些与此类似：

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

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

希望这有助于

来源

2011-09-04 02:00:06 GoGoGarrett

jQuery：动画部分调整'点击'

回答

相关问题