www.ca788.comjquery中的animate不能操作transform?

2016/12 01 14:12
此文章不得转载,如有需要请联系网站管理员。

一度的温暖,一百度的爱情,来自于www.ca788.com的点点滴滴

我在一个网站上望见transform: translate0%是变革的,但是自己试不出来

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;

        }
        .box {
            width: 440px;
            height: 240px;
            background-color: #cecece;
            margin: 100px auto;
            padding: 0 37px;
            box-sizing: border-box;
        }
        .table {
            width: 100%;
            height: 41px;
            background-color: #e3e3e3;
            display: table;
            position: relative;
        }
        .cell {
            display: table-cell;
            background-color: #665d16;
            text-align: center;
            vertical-align: middle;
        }
        .move {
            position: absolute;
            width: 33.33333%;
            height: 100%;
            left: 0;
            bottom: 0;
            transform: translate0%;
        }
        .move::before {
            content: ;
            height: 2px;
            width: 100%;
            background-color: #1478f1;
            position: absolute;
            bottom: 0;
            left: 0;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="table">
        <div class="cell">环球</div>
        <div class="cell">环球</div>
        <div class="cell">环球</div>
        <div class="move"></div>
    </div>
</div>
<script src="js/jquery-1.7.2.min.js"></script>
<script>
    $.cell.clickfunction  {
        var num = $this.index;
        $.move.animate{transform: translate + num * 100 + %};
//        $.move.css{transform: translate + num * 100 + %};
    }
</script>
</body>
</html>

用css可以改动transform,但是用animate不克不及改动,什么缘由?
怎样处理?

(看完/读完)这篇文章有何感想! 来看看www.ca788.com是怎么评论的吧!

--转载请注明: www.ca788.com#亚洲城ca788手机版官网 » www.ca788.comjquery中的animate不能操作transform?

发表评论

(必填)