web-dev-qa-db-ja.com

jQuery .animateを使用してdivを右から左にアニメーション化しますか？

_top: 0px_と_right: 0px_に絶対配置されたdivがあり、jqueryの.animate()を使用して、現在の位置から_left: 0px_にアニメーション化します。これをどのように行うのですか？私はこれを機能させることができないようです：

_$("#coolDiv").animate({"left":"0px"}, "slow");
_

なぜこれが機能しないのか、私が探していることをどのように達成するのですか？

ありがとう!!

jqueryjquery-animate
42
Alex

動作しない理由は、rightの位置が設定されているが、leftが設定されていないことに関係していると思います。

leftを手動で現在の位置に設定すると、次のようになります：

実例：http://jsfiddle.net/XqqtN/

var left = $('#coolDiv').offset().left;  // Get the calculated left position

$("#coolDiv").css({left:left})  // Set the left to its calculated position
             .animate({"left":"0px"}, "slow");

編集：

Firefoxは、計算されたleftの位置がピクセル単位の正しい値として利用できるため、Firefoxが期待どおりに動作するように見えますが、Webkitベースのブラウザ、および明らかにIEは左の位置にautoの値を返します。

autoはアニメーションの開始位置ではないため、アニメーションは事実上0から0まで実行されます。見るのはあまり面白くないです。 ：o）

上記のようにアニメーションの前に左の位置を手動で設定すると、問題が修正されます。

変数でランドスケープを散らかしたくない場合は、変数の必要性を取り除く同じものの素敵なバージョンがあります：

$("#coolDiv").css('left', function(){ return $(this).offset().left; })
             .animate({"left":"0px"}, "slow");    ​
50
user113716

これは私のために働いた

$("div").css({"left":"2000px"}).animate({"left":"0px"}, "slow");
6
Abhishek Goel

動作例を示す最小限の答えを次に示します。

<html>
<head>
<title>hello.world.animate()</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"
    type="text/javascript"></script>
<style type="text/css">
#coolDiv {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    background-color: #ccc;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
    // this way works fine for Firefox, but 
    // Chrome and Safari can't do it.
    $("#coolDiv").animate({'left':0}, "slow");
    // So basically if you *start* with a right position
    // then stick to animating to another right position
    // to do that, get the window width minus the width of your div:
$("#coolDiv").animate({'right':($('body').innerWidth()-$('#coolDiv').width())}, 'slow');
    // sorry that's so ugly!
});
</script>
</head>
<body>
    <div style="" id="coolDiv">HELLO</div>
</body>
</html>

元の答え：

あなたが持っている：

$("#coolDiv").animate({"left":"0px", "slow");

修正済み：

$("#coolDiv").animate({"left":"0px"}, "slow");

ドキュメント： http://api.jquery.com/animate/

5
artlung

アニメーション化する子要素の幅がわかっている場合は、マージンオフセットを使用してアニメーション化することもできます。たとえば、これはleft：0からright：0までアニメーション化します

CSS：

.parent{
width:100%;
position:relative;
}

#itemToMove{
position:absolute;
width:150px;
right:100%;
margin-right:-150px;
}

Javascript：

$( "#itemToMove" ).animate({
"margin-right": "0",
"right": "0"
}, 1000 );
1
freeworlder

.animateメソッドは、要素に位置属性を指定した場合にのみ機能しますが、そうでない場合は移動しませんか？

たとえば、divを宣言してもcssで何も宣言しない場合、プロパティマージンを宣言しても、デフォルト位置を想定せず、ページに移動しません。

1
Alessandro Violante