jquery.magicmove实现dom元素插入动画效果代码-html代码-BFW代码库

jquery.magicmove实现dom元素插入动画效果代码

代码语言：html

所属分类：动画

代码描述：jquery.magicmove实现dom元素插入动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style type="text/css">
        button{
        		margin: 0.5em;padding: 0.6em 1em;border: 3px solid #1d7db1;font-weight: 700;
        	}
            article, section {
              display: block;
            }
        
            .containers {
              width: 600px;
              height: 800px;
              overflow: hidden;
              margin:0 auto;
            }
        
            .containers section {
              margin: 10px 0 0 10px;
              float: left;
              border: 1px solid #CCC;
              width: 100px;
              height: 100px;
        
              text-align: center;
              line-height: 100px;
            }
    </style>

</head>

<body>
    <div class="htmleaf-container">
    
        <div class="htmleaf-content bgcolor-8">
            <button class="animate1">在第1个元素后面插入</button>
            <button class="animate2">在第3个元素前面插入</button>
            <article class="containers">
                <section class="first">.........完整代码请登录后点击上方下载按钮下载查看