HTML Jquery在鼠标悬停时左右移动图像 [英] HTML Jquery move image left and right on mouse hover

问题描述

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

I am new to HTML and jquery and I am trying to move a image left and right when a mouse hovers over the image in HTML page.

我认为这是可以使用jquery动画功能来完成，但我不能使它工作。

I think this could be done using jquery animate function but I cannot make it work.

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

Can someone please show me an easy HTML code on how to do this?

谢谢，

推荐答案

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

This is an example, there are hundreds of different ways to it.

CSS方式：

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

JavaScript / jQuery方式：

The JavaScript/jQuery way:

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

演示

---

使用动画：

JavaScript / jQuery：

Demo

---

Using animations:

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;
}

这篇关于HTML Jquery在鼠标悬停时左右移动图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！