Question

我正在尝试创建一个函数，其中#div将 TILT 点击左侧15度，然后不久之后返回上一个位置，但我认为这可以通过添加Timing事件轻松添加到解决方案中。但是 Tilt 是我遇到的最麻烦的事情。理想情况下，我会单独用JavaScript做这件事;但是会对jQuery和/或CSS3开放。

我在创建自定义摇动时使用了以下代码段。

jQuery.fn.shake = function() {
    this.each(function(i) {
        $(this).css({ "position" : "relative" });
        for (var x = 1; x <= 3; x++) {
            $(this).animate({ left: -15 }, 10).animate({ left: 0 }, 50).animate({ left: 15 }, 10).animate({ left: 0 }, 20);
        }
    });
    return this;
}

但它不允许;或者我没有这样的运气 - 创造'TILT'效果，只有水平或垂直的副作用。我假设我可能需要在那里获得一些CSS3。有什么指针吗？

免责声明：我希望找到主JavaScript的解决方案;因为我支持IE 9+ / Modern Browsers（chrome，ff，safari）。否则，此时没有真正的实施点。感谢。

Answer 1

您可以使用transform创建“倾斜”：

.skew{
    -webkit-transform: matrix(1, 0, 0.5, 1,  50, 0);
    -o-transform: matrix(1, 0, 0.5, 1,  50, 0);
    -ms-transform: matrix(1, 0, 0.5, 1,  50, 0);
    transform: matrix(1, 0, .5, 1,  50, 0);
}

http://jsfiddle.net/HemTH/1/

虽然浏览器兼容性可能是个问题http://caniuse.com/#search=transforms

Answer 2

您可以使用CSS3动画和一小撮javascript执行此操作：
CSS：

.rotate {
    animation: rotate 10s;
    -webkit-animation: rotate 5s;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(15deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(15deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
    }
}

使用Javascript：

function shake(item) {
    item.className += "rotate";
}

Answer 3

我认为这可能是CSS动画的一个很好的选择，因为您可以轻松定义关键帧：

#foo {
    width: 50px;
    height: 50px;
    background-color: blue;
    position: relative;
    -webkit-animation: skewer .1s;
}
@-webkit-keyframes skewer {
    0% {
        left: -15px;
        -webkit-transform: skewX(-15deg);
    }
    25% {
        left: 0;
        -webkit-transform: skewX(0deg);
    }
    55% {
        left: 15px;
        -webkit-transform: skewX(15deg);
    }
    100% {
        left: 0px;
        -webkit-transform: skewX(0deg);
    }
}

http://jsfiddle.net/VGGqT/

但是，.animate如果第二个参数是对象，则采用step属性：

$(this).animate({ left: -15 }, {
    duration: 10,
    step: function (now) {
        $(this).css("-webkit-transform", "skewX(" + now + "deg)");
    }
})

您必须为每个单独的动画步骤执行此操作，因此它更详细。

Answer 4

您必须使用Interval函数，而不是使用限制为3的for循环。在JS中有几种方法可以使用Interval函数，你可以使用setInterval（？，？），并以毫秒为单位传递函数名称和间隔应该做的伎俩

setInterval(localFunction, 100);    // 1 second
setInterval(globalFunction(), 200); // 2 seconds

尝试jQuery: setInterval

轻量级倾斜onClick / JS或CSS3

4 个答案: