使用jquery实现动画div

Question

我想为我的how应用程序提供一个像http://demo.songpane.com/#/set/c/b这样的UI，有人能建议我如何在jquery中实现这一点吗？它是否需要jquery动画或其他什么东西，有插件吗?还是我必须从头开始编写代码。该页被划分为不同的移动div。

Answer 1

下面是一个非常基本的示例，只使用JQuery：http://jsfiddle.net/7DSmK/

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

这只是隐藏所有的“内容”div，然后使用一个内置在JQuery中的非常简单的动画显示您想要的内容。

要做更好的事情，您可能需要使用JQuery UI或CSS3转换。

http://jqueryui.com/animate/

transitions.asp

Answer 2

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

您可以使用CSS transition-duration指定动画时间。然后，您所需要做的就是更改jQuery中的CSS规则，它们就会有动画效果。

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

如果没有CSS，这两种方法都无法实现，但是，动画方法可能会给您提供最大的灵活性，因为它允许您在每个动画上指定不同的持续时间。

当然，也有一些库，如Bootstrap和jQueryUI，它们具有内置的动画函数，如果您不想自己编写代码，可以简单地调用这些函数。