javascript - 动画元素到另一个元素的位置

Question

我正在尝试为图像设置动画，以便覆盖另一个图像。这是我尝试过的，但没有成功：

var xrect = $("#black").offset().left;
var yrect = $("#black").offset().top;

var xlogo = $("#logo").offset().left;
var ylogo = $("#logo").offset().top;
$('.logo').transition({ x: xrect + 'px', y: yrect + 'px' });

HTML 是：

<img class="logo" id="logo" onclick="animateLogo()" src="images/logo.png" alt="logo"/>
<br />
<img class="black" id="black" src="images/black.png" alt="black logo"/>

有谁知道做这种性质的事情的例子？

Answer 1

该transition函数不是默认的 JQuery 实现。试试吧：http animate: //api.jquery.com/animate/

我添加了一个 z-index 值，以确保您的徽标位于矩形上方。

将您的图像样式位置设置为绝对像@dfsq 建议

    img {position: absolute; z-index: 1;}

    var xrect = $("#black").offset().left;
    var yrect = $("#black").offset().top;

    var xlogo = $("#logo").offset().left;
    var ylogo = $("#logo").offset().top;

    $('#logo').css('z-index',999).animate({ left: xrect + 'px', top: yrect + 'px' },2000);