内置36种DOM元素动画的jQuery响应式布局插件

magic_layout是一款可以将页面中所有DOM元素都制作出动画效果的jQuery响应式布局插件。它内置了36种不同的CSS3动画效果。它是响应式设计，完全适用于移动手机设备。

使用方法

首先需要引入必要的js和css文件。

<link rel="stylesheet" type="text/css" href="core/animate.css" />
<script src="js/jquery.min.js"></script>   
<script src="core/magicLayout.js"></script>                
              

HTML结构

在该布局的HTML结构中，你可以通过layer class来指定层，还可以使用一些data-*属性，这些属性的描述如下：

• data-show-effect：显示的动画效果。
• data-show-dela：动画的延迟时间，单位毫秒。
• data-time：动画的时间，单位毫秒。

如下面是一个简单布局结构：

<div id="english_portfolio" class="dt_container dt_container_columns3 projects">  
  <a href="#" target="blank" class="dt_container_item demo_stas_project layer" data-show-effect="zoomIn" data-show-delay="400">
    <h3 class="project_item">Responsive modal window</h3>
  </a>
  <a href="#" target="blank" class="dt_container_item demo_stas_project layer" data-show-effect="zoomIn" data-show-delay="600">
    <h3 class="demo_stas_project_item">Responsive modal window</h3>
  </a>
  <a href="#" target="blank" class="dt_container_item demo_stas_project layer" data-show-effect="zoomIn" data-show-delay="800">
    <h3 class="demo_stas_project_item">Responsive modal window</h3>
  </a>
</div>
              

初始化插件

在页面DOM元素加载完毕之后，可以通过animationLayout()方法来初始化该布局插件。

(function($){
  $(this).animationLayout({
    container: $('#action_layout')
  });
})(jQuery);
              

36种动画效果

下面列出了所有可用的动画效果。