HTML Jquery在鼠标悬停时左右移动图像

Question

我是HTML和jquery的新手，当鼠标悬停在HTML页面中的图像上时，我试图左右移动图像。

我认为这可以使用jquery animate函数完成，但我无法使其工作。

有人可以告诉我一个关于如何做到这一点的简单HTML代码吗？

谢谢，

Answer 1

这是一个例子，有数百种不同的方法。

CSS方式：

#css img {
    left: 0px;
    transition: left .5s;
}
#css:hover img {
    left: 50px;
}

JavaScript / jQuery方式：

$('#js').on('mouseenter', function() {
  $(this).find('img').css('left', '50px');
}).on('mouseleave', function() {
  $(this).find('img').css('left', '0px');
});

Demo

---

使用动画：

的JavaScript / jQuery的：

$('#js').hover(function () {
    $(this).find('img').animate({
        left: '50px'
    }, 500);
}, function () {
    $(this).find('img').animate({
        left: '0px'
    }, 500);
});

CSS转换：

img {
    position: relative;
    margin:20px;
    left:0px;
    -webkit-transition: left 500ms;
    -moz-transition: left 500ms;
    -ms-transition: left 500ms;
    -o-transition: left 500ms;
    transition: left 500ms;
}
#css:hover img {
    left:50px;
}

Demo with both animation variants