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实现。请改为animate：http://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);

将元素设置为另一个元素的位置

1 个答案: