间隔性动画如何设置鼠标移入停止鼠标移出继续呢

按着你的思路写了一个：

        var box   = document.getElementById('rotate')
        var angle = 0
        var timer = null

        function startMove() {
            console.log('startMove');
            timer = setInterval(doMove, 60)
        }

        function stopMove() {
            console.log('stopMove');
            clearInterval(timer)
        }

        function doMove() {
            angle += 1
            setCSS3(box, {'transform': 'rotateX('+ angle +'deg)'})
        }

        function setCSS3(obj, attrObj) {
            for (var attr in attrObj) {
                if (!attrObj.hasOwnProperty(attr)) {
                    continue
                }
                var newAttr = attr
                if (attr.indexOf('-') > -1) {
                    var num = attr.indexOf('-')
                    newAttr = attr.replace(attr.substring(num, num + 2), attr.substring(num + 1, num + 2).toUpperCase())
                }
                obj.style[newAttr] = attrObj[attr]
                newAttr = newAttr.replace(/(\w)/, function (match) {
                    return match.toUpperCase()
                })
                obj.style['webkit' + newAttr] = attrObj[attr]
                obj.style['moz' + newAttr]    = attrObj[attr]
                obj.style['ms' + newAttr]     = attrObj[attr]
                obj.style['o' + newAttr]      = attrObj[attr]
            }
        }
        box.onmouseover = function () {
            startMove()
        }
        box.onmouseout = function () {
            stopMove()
        }

有两个问题：

•用 setInterval 不好，要想怎么用 setTimeout 来代替。

•后面的 obj.style['webkit' + newAttr] 在浏览器里面并没有起作用。

        var box   = document.getElementById('rotate')
        var angle = 0
        var timer = null

        function startMove() {
            console.log('startMove');
            timer = setInterval(doMove, 60)
        }

        function stopMove() {
            console.log('stopMove');
            clearInterval(timer)
        }

        function doMove() {
            angle += 1
            setCSS3(box, {'transform': 'rotateX('+ angle +'deg)'})
        }

        function setCSS3(obj, attrObj) {
            for (var attr in attrObj) {
                if (!attrObj.hasOwnProperty(attr)) {
                    continue
                }
                var newAttr = attr
                if (attr.indexOf('-') > -1) {
                    var num = attr.indexOf('-')
                    newAttr = attr.replace(attr.substring(num, num + 2), attr.substring(num + 1, num + 2).toUpperCase())
                }
                obj.style[newAttr] = attrObj[attr]
                newAttr = newAttr.replace(/(\w)/, function (match) {
                    return match.toUpperCase()
                })
                obj.style['webkit' + newAttr] = attrObj[attr]
                obj.style['moz' + newAttr]    = attrObj[attr]
                obj.style['ms' + newAttr]     = attrObj[attr]
                obj.style['o' + newAttr]      = attrObj[attr]
            }
        }
        box.onmouseover = function () {
            startMove()
        }
        box.onmouseout = function () {
            stopMove()
        }

有两个问题：

用 setInterval 不好，要想怎么用 setTimeout 来代替。
后面的 obj.style['webkit' + newAttr] 在浏览器里面并没有起作用。