2 
$('#container img')
                .clone()
                .appendTo('#container')
                .css({'position' : 'absolute','z-index':9999,marginLeft:-100})
                .animate({opacity: 0.1, left: 200,top:200,height:420}, 1000, function() {
                    $(this).remove();
                     actualizar(iGal);

            });

基本的に、左に 200px、下に 200px 移動したいのですが、左に 200px、下に 200px のページ コルデネードに移動されてしまい、

.css({'position','relative'});

代わりに、しかしその位置はアニメ化されません。

私は何が欠けていますか？私はオフセットでそれをしなければなりませんか？

4

2 に答える 2

5

あなたが使用することができます

...
.animate({opacity: 0.1, left: "+=200",top:"+=200",height:420}, 1000, function() {
...

次に、x 軸と y 軸に 200px を追加します

または、最初にオフセットを検出できます。

var offset = {
    x: $('#container img').offset().left,
    y: $('#container img').offset().top
};

...
.animate({opacity: 0.1, left: offset.x+200,top: offset.y+200,height:420}, 1000, function() {
...

jQueryoffset関数は、ブラウザ ウィンドウの左上隅からのオフセットを返します。またはpositionを持つ最初の親要素へのオフセットを決定する別の関数が呼び出されます。position relativeabsolute

http://jsfiddle.net/UDb7V/

于 2011-10-05T14:19:20.667 に答える
0

簡単な例を次に示します。私はアニメーションのものだけでそれを分解しようとしました. より複雑に追加することができます。

HTML

<div id='#container'>
    <p>Text above the image</p>
    <img id='img' src='http://www.google.com/intl/en_com/images/srpr/logo3w.png' />
    <p>Text below the image</p>
    <button id='start'>Animate</button>
</div>

CSS

#container { position: relative; }

#img { position: relative; }

ジャバスクリプト

$('#start').click(function(){

    $('#img').animate({left:'100px', top:'100px'}, 1000, function(){
       alert('here');
    }); 

});

ここに jsFiddle があります: http://jsfiddle.net/cfrN2/1/

お役に立てれば。

ボブ

于 2011-10-05T14:38:35.397 に答える