Question

我有一些代码可以成功地旋转div我想要的，但是，它只执行一次。我假设这是因为该函数只是添加了CSS transform属性，一旦添加它们，浏览器（我在Win7上使用Chrome）并不关心它们是否第二次添加。有没有办法让div每次点击都旋转，而不是只旋转一次？

的jQuery

$(function(){
    $('.hanging-div').on('click', function(){
        $(this).css({
            'transform':'rotate(-360deg)',
            '-ms-transform':'rotate(-360deg)',
            '-moz-transform':'rotate(-360deg)',
            '-o-transform':'rotate(-360deg)'
        });
    });
});

HTML

<div class="hanging-div"><img src="http://placehold.it/65x350"></div>

CSS

.hanging-div {
    margin:0 auto;
    display:block;
    width:200px;
    padding:50px 0;
    transition:all 2s;
    -moz-transition:all 2s;
    -webkit-transition:all 2s;
    -o-transition:all 2s;
    transform-origin:50% 0%;
    -moz-transform-origin:50% 0%;
    -webkit-transform-origin:50% 0%;
    -ms-transform-origin:50% 0%;
    -o-transform-origin:50% 0%;
}

这是小提琴：http://jsfiddle.net/MrP43/1/

修改

之后我也尝试删除了transform属性，但它似乎没有效果。

$(function(){
    $('.hanging-div').on('click', function(){
        $(this).css({
            'transform':'rotate(-360deg)',
            '-ms-transform':'rotate(-360deg)',
            '-moz-transform':'rotate(-360deg)',
            '-o-transform':'rotate(-360deg)'
        }, function(){
                $(this).css({
                    'transform':'',
                    '-ms-transform':'',
                    '-moz-transform':'',
                    '-o-transform':''
                });
        });
    });
});

Answer 1

好的，我已经想通了@GroundZero。我只是将旋转度变为变量，并从每次点击的变量中减去360度，现在它按预期工作。现在我想知道这是否是最好的方法呢？它有效，所以我不抱怨，但如果其他人有任何解决方案，我很乐意看到它们。谢谢！

$(function(){
    n = -360;
    $('.hanging-div').on('click', function(){
        $(this).css({
            'transform':'rotate('+n+'deg)',
            '-ms-transform':'rotate('+n+'deg)',
            '-moz-transform':'rotate('+n+'deg)',
            '-o-transform':'rotate('+n+'deg)'
        });
        n-=360;
    });
});

小提琴：http://jsfiddle.net/tuJjg/

Answer 2

另一种可能的方法是在动画结束后通过反向转换手动重置转换：

$('.hanging-div').on('click', function(){
    $('.hanging-div').css({
        'transition':'all 0.45s ease-in-out 0s',
        'transform':'rotate(-360deg)' 
    });
    setTimeout(function() {
        $('.hanging-div').css({
            'transition':'all 0s ease-in-out 0s',
            'transform':'rotate(0deg)'
        });
    }, 450); // transition duration goes here (in ms)
});

注意：使用$(this)时似乎不起作用，不知道为什么......。

不止一次使用jQuery触发CSS变换

2 个答案: