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

演示

使用动画:

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

演示两种动画变体