javascript - 带有onclick的CSS3过渡效果

Question

我正在研究 CSS3，有点卡在了一个问题上。

问题如下:

我有一个最初位于屏幕左侧的图像:

.box img{
margin-left:0;
-webkit-transition:1s;
 }

现在，悬停时，当我想要效果发生时，即。当我将鼠标悬停在图像上时，将图像从左侧移动 500px，代码如下:

.box img:hover{
margin-left:500px;
-webkit-transition:1s;
 }

这非常完美。唯一的问题是当我希望在单击图像时产生相同的效果。那就是我希望图像在单击时从左侧移动 500px 并停留在那里。 当我再次点击图片时，它应该会回到原来的位置。

我该怎么办，请解释一下!!!

Answer 1

您可以使用几乎相同的方法，只需使用 JS/jQuery 添加/删除一个具有所有规则(如悬停状态)的类。

CSS

.box img:hover, .box img.clicked{
    margin-left:500px;
    -webkit-transition:1s; // you don't need to specify this again
 }

jQuery

$('.box img').on('click', function() {
    $(this).toggleClass('clicked');
});

更新

这是一个例子:http://jsfiddle.net/Te9T5/ 悬停状态已移除，因为当悬停和单击执行相同的操作时它看起来不太好，因为您需要悬停某物才能单击它。