Question

我有以下代码，使用CSS3动画图像在其轴上旋转3次：

$(function(){
    var $img = $(".flipimg");

    function rotate(degree,speed,orientation) {

    $img.css({ WebkitTransform: 'rotateY('+degree+'deg)'});
    $img.css({ '-o-transform': 'rotateY('+degree+'deg)'});
    $img.css({ '-transform': 'rotateY('+degree+'deg)'});
    $img.css({ '-moz-transform': 'rotateY('+degree+'deg)'});

    $img.css({ '-moz-transition': speed+'s'});
    $img.css({ '-moz-transform-style': 'preserve-3d'});
    $img.css({ '-webkit-transition': speed+'s'});
    $img.css({ '-webkit-transform-style': 'preserve-3d'});
    $img.css({ '-o-transition': speed+'s'});
    $img.css({ '-o-transition-style': 'preserve-3d'});
    $img.css({ '-transition': speed+'s'});
    $img.css({ '-transform-style': 'preserve-3d'});

    }
    $('.flipimg').click(function(){

        $speed = 1;
        for($i=0;$i<=1080;$i++)
        {
            if($i % 100 == 0)
            {
                 $speed = $speed + 0.2 ;
            }
            rotate($i,$speed,'Y');
        }
        setTimeout(function(){
            $('.flipimg').removeAttr('style');
        },3000);

    });

});

目前，它适用于.flipimg类的所有图像。我想更新此代码，以便效果仅适用于单击的特定图像。我假设我应该使用$（this）字符串，但不确定正确用法的方式和位置？

Answer 1

我的建议是使用css animate代替然后侦听动画结束事件。这样你可以使用css类来启动动画并在完成后将其删除。而且我只会根据您的要求在使用此单击的图像上执行此操作。

我的css：

.image {
    width: 120px;
    height: 120px;
    margin:10 px;
}
.spin{
    -webkit-animation:spin 1s linear 3;
    -moz-animation:spin 1s linear 3;
    animation:spin 1s linear 3;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

这个小javascript：

(function($){
var animEndEventNames = ['webkitAnimationEnd',
        'oAnimationEnd',
        'MSAnimationEnd',
        'animationend'].join(" ");

    $(".image").click(function(){
        var $this = $(this);
        $this.addClass("spin").on(animEndEventNames, function(e){
            $this.off(animEndEventNames).removeClass("spin");
        });

    });    
}(jQuery));

你可以在fiddle中测试它。

Answer 2

$(function() {
    var $img = $(".flipimg");

    function rotate(degree, speed, orientation, s) {

        s.css({
            WebkitTransform: 'rotateY(' + degree + 'deg)',
            '-o-transform': 'rotateY(' + degree + 'deg)',
            '-transform': 'rotateY(' + degree + 'deg)',
            '-moz-transform': 'rotateY(' + degree + 'deg)',
            '-moz-transition': speed + 's',
            '-moz-transform-style': 'preserve-3d',
            '-webkit-transition': speed + 's',
            '-webkit-transform-style': 'preserve-3d',
            '-o-transition': speed + 's',
            '-o-transition-style': 'preserve-3d',
            '-transition': speed + 's',
            '-transform-style': 'preserve-3d'
        });

    }
    $img.click(function() {
        var _this = $(this);

        $speed = 1;
        for ($i = 0; $i <= 1080; $i++) {
            if ($i % 100 == 0) {
                $speed = $speed + 0.2;
            }
            rotate($i, $speed, 'Y', _this);
        }

        setTimeout(function() {
            _this.removeAttr('style');
        }, 3000);

    });

});

Answer 3

您需要不将所有图像保存到顶部的$ img变量，并传入$（this）以作为Click事件的另一个参数旋转，如下所示：

$('.flipimg').on('click', function () {
    rotate( $(this), $i, $speed, Y );
});

更新旋转以获取此参数并使用它而不是$ img

如何使用$（this）来选择元素

3 个答案: