1

別の画像をカバーするように画像をアニメーション化しようとしています。これは私が試したものですが、成功しませんでした:

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"/>

この性質の何かをしている例を知っている人はいますか?

4

1 に答える 1

2

この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);
于 2013-02-27T14:25:28.413 に答える