javascript - 我需要使一个对象向左浮动，同时使用 jquery 在 div 内淡出

Question

我需要将这个白色箭头浮动到右侧，同时淡化它的颜色。

我试着这样做..

<div onMouseOver="myfunction()" style="width:250px; height:50px; background-color:#09F;">
<img id="sliding_image" src="images/leftmenuicon.png" width="30" height="30" />
</div>
<script>
function myfunction(){
document.getElementById("sliding_image").style.paddingLeft="100px";
}
</script>

但我无法控制速度。当我将鼠标移到那个 div 上时，那个箭头就在旁边弹出。我不需要那个。我需要看到箭头指向另一端。

有没有 jquery 或 javascript 可以做到这一点？

Answer 1

当您标记 jquery 时，使用Animate()

$("yourDivId").hover(function(){
    $('#sliding_image').animate({
        'padding-left': '+=100px'
    }, "normal");
}, function(){
   $('#sliding_image').animate({
        'padding-left': '-=100px'
    }, "normal");
});

http://api.jquery.com/animate/

Answer 2

---

你也可以通过 CSS3 动画来做到这一点。

这是一个很好的指南：使用 CSS 动画