javascript - 使用 jquery 翻转图像

Question

我有多个图像，想在 3d 和 2d 中一张一张地旋转图像。

HTML 就像

<div><img src="1.jpg"></div>
<div><img src="2.jpg"></div>
<div><img src="3.jpg"></div>

等等

所以我想通过上一个图像翻转和下一个翻转来显示图像。

我试过下面的代码

隐藏:

$hide.animate({ 
   transform: 'rotate(180deg)', 
   opacity: 0.1 
},
1500,
'easeInOutBack', 
function () { 
    $(this).hide(); 
});

显示:

$show.show().animate({ transform: 'rotate(180deg)', opacity: 1.0 },1500,'easeInOutBack');

但它不起作用。我只使用 jquery 和 jquery ui。

Answer 1

您不用 jQuery 制作旋转动画，让 CSS 为您做。

试试这个:

js:

$hide.addClass('hide').removeClass('show');
$show.removeClass('hide').addClass('show');

CSS:

.show, .hide{transition:all 0.3s ease;}
.hide{opacity:0.1;transform:rotate(0deg);}
.show{opacity:1;transform:rotate(1800deg);}

希望对您有所帮助。

编辑:

如果您仍然希望使用 jQuery 而不是 CSS，我建议您使用一个插件，例如 http://nnattawat.github.io/flip/

编辑 2:

如果你仍然不想要 CSS 方法，而不是 jQuery 插件，我建议你看这里: CSS rotation cross browser with jquery.animate()

"CSS-Transforms are not possible to animate with jQuery, yet. You can do something like this [code sample]"

我还创建了一个 fiddle 来演示这种方法:http://jsfiddle.net/jhcvb2ty/