jQuery使用数据绑定的方式来执行元素的动画原

Posted 2020-07-11

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery使用数据绑定的方式来执行元素的动画原相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head>
    <title>使用数据绑定的方式来执行元素的动画</title>
    <meta charset="utf-8">
    <style>
        *{margin: 0;padding: 0;}
        body{background: #eee;}
        ul,
        ol{list-style: none;}
        .container{position: relative;width: 600px;height: 600px;margin: 50px auto;}
        .container ul{position: relative;height: 100%;}
        .container ul li{position: absolute;border-radius: 50%;opacity: .3;filter: alpha(opacity=30);}
        .container ul li.item-1{top: 0;left: 0;width: 200px;height: 200px;background: #f03;}
        .container ul li.item-2{top: 0;right: 0;width: 160px;height: 160px;background: #cf0;}
        .container ul li.item-3{right: 0;bottom: 0;width: 120px;height: 120px;background: #069;}
        .container ul li.item-4{bottom: 0;left: 0;width: 80px;height: 80px;background: #f60;}
        .container .btn{position: absolute;top: 50%;right: 0;width: 100px;margin-top: -20px;background: #fff;border-radius: 3px;cursor: pointer;font: 14px/40px "Consolas";color: #333;text-align: center;letter-spacing: 1px;}
        .container .btn.animate{right: 0;}
        .container .btn.reset{left: 0;}
    </style>
</head>
<body>
    <div class="container">
        <!-- <ul>
            <li class="item-1" data-animate="{top: 50%,    left: 50%,  marginLeft: -50,  marginTop: -50,    opacity: 1}"></li>
            <li class="item-2" data-animate="{top: 50%,    right: 50%, marginRight: -40, marginTop: -40,    opacity: 1}"></li>
            <li class="item-3" data-animate="{bottom: 50%, right: 50%, marginRight: -30, marginBottom: -30, opacity: 1}"></li>
            <li class="item-4" data-animate="{bottom: 50%, left: 50%,  marginLeft: -20,  marginBottom: -20, opacity: 1}"></li>
        </ul> -->
        <ul>
            <li class="item-1"></li>
            <li class="item-2"></li>
            <li class="item-3"></li>
            <li class="item-4"></li>
        </ul>
        <a class="btn animate">Animate</a>
        <a class="btn reset">Reset</a>
    </div>
 
</body>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script>
    $.fn.dataAnimate = function(duration, callback) {
        String.prototype.stringToObj = function() {
            var obj = {},
                arr = this.replace(/(^\s+)|(\s+$)/g, ‘‘)
                .replace(/(\{)|(\})/g, ‘‘)
                .split(‘,‘);
 
            for (var i = 0, len = arr.length; i < len; i++) {
                var key = arr[i].split(‘:‘)[0].replace(/(^\s+)|(\s+$)/g, ‘‘),
                    value = arr[i].split(‘:‘)[1].replace(/(^\s+)|(\s+$)/g, ‘‘);
 
                obj[key] = value;
            }
 
            return obj;
        };
 
        if (typeof duration === ‘function‘) {
            callback = arguments[0];
            duration = 300;
        }
 
        return this.each(function() {
            var prop = {};
 
            if ($(this).data(‘animate‘)) {
                prop = $(this).data(‘animate‘).stringToObj();
            }
 
            $(this).stop(true, false).animate(prop, {
                duration: duration,
                complete: function() {
                    if (callback) {
                        callback.call(this);
                    }
                }
            });
        });
    };
 
 
    var begin = [
        ‘{top:    0, left : 0, marginLeft : 0, marginTop   : 0, opacity: 0.3}‘,
        ‘{top:    0, right: 0, marginRight: 0, marginTop   : 0, opacity: 0.3}‘,
        ‘{bottom: 0, right: 0, marginRight: 0, marginBottom: 0, opacity: 0.3}‘,
        ‘{bottom: 0, left : 0, marginLeft : 0, marginBottom: 0, opacity: 0.3}‘
    ];
 
    var end = [
        ‘{top   : 50%, left : 50%, marginLeft : -100, marginTop   : -100, opacity: 0.8}‘,
        ‘{top   : 50%, right: 50%, marginRight: -80,  marginTop   : -80,  opacity: 0.8}‘,
        ‘{bottom: 50%, right: 50%, marginRight: -60,  marginBottom: -60,  opacity: 0.8}‘,
        ‘{bottom: 50%, left : 50%, marginLeft : -40,  marginBottom: -40,  opacity: 0.8}‘
    ];
 
    $(‘.btn‘).click(function() {
        if ($(this).hasClass(‘animate‘)) {
            $(‘ul li‘).each(function(index) {
                $(this).data(‘animate‘, end[index]);
            });
        }
 
        if ($(this).hasClass(‘reset‘)) {
            $(‘ul li‘).each(function(index) {
                $(this).data(‘animate‘, begin[index]);
            });
        }
 
        $(‘ul li‘).dataAnimate();
    });
</script>
</html>

以上是关于jQuery使用数据绑定的方式来执行元素的动画原的主要内容，如果未能解决你的问题，请参考以下文章