Question

对于我的webapp，我想要一个像http://demo.songpane.com/#/set/c/b这样的UI，任何人都可以建议我如何在jquery中实现这一点。它是否需要jquery动画或其他东西，是否有插件或我是否必须从头开始编写代码。该页面分为不同的移动div。

Answer 1

有几种不同的方法可以实现动画。

您可以使用CSS transition-duration指定动画时间。然后你需要做的就是改变jQuery中的CSS规则，它们将动画。

另一种方法是使用jQuery的.animate()方法，它允许您在指定的时间段内更改CSS规则。 jQuery还有一些内置动画的速记方法，例如.fadeIn()和.fadeOut()，用于将元素的display设置为block或none。< / p>

没有CSS也无法实现，但是，animate方法可能会给你最大的灵活性，因为它允许你为每个动画指定不同的持续时间。

当然，像Bootstrap和jQueryUI这样的库都有内置的动画功能，如果你不想自己编写代码，可以简单地调用它们。

Answer 2

这是一个仅使用JQuery的基本示例：http://jsfiddle.net/7DSmK/

$(document).on('click', '.btn', function() {
   $('#Content div').hide();
    var target = '#' + $(this).html();
    $(target).show('slow');
});

这简单地隐藏了所有＆＃34;内容＆＃34; divs然后使用JQuery中内置的非常简单的动画显示你想要的那个。

要做更多花哨的事情，您需要使用JQuery UI或CSS3过渡。