0

2 つのオプションを持つボックスを作成しようとしています。オプション 1 をクリックすると左にアニメーション化してフェードアウトし、オプション 2 を選択すると右にアニメーション化してフェードアウトします。残念ながら、それは私が望む右ではなく、左と上にのみアニメーション化します。（また、底をアニメートしません）。これを解決するにはどうすればよいですか。

$(document).ready(function () {
$(".appIMG2").one('click.appIMG2', function() {
    $('.appIMG1, .appIMG2').unbind('click');
    $('#app1').animate({
        right: "250px",
        opacity:0
    });
    $("#app3").fadeIn("slow");
    });
});

#app1{
position:absolute;
width:250px;
height:250px;
z-index:10;
top:50%;
left:50%;
margin:-150px 0 0 -150px;
background:white;
box-shadow: 0 0 1px 1px #888888;
text-align:center;
}

#app1,2 および 3 のマージンを宣言する方法に問題があると思いますが、わかりません。

http://jsfiddle.net/7tgJC/

4

1 に答える 1

0

まず、HTML も表示した方がよいと言えます - できれば Fiddle で。

あなたが見ているのは、フェードイン/アニメーションの意図されたデフォルトの動作だと思います。異なる方向にフェードイン/アニメーション化する場合は、 jQuery UIライブラリで方向パラメーターを指定してjQuery Slideを利用できます。

<script>
$('#examplediv').hide("slide", { direction: "right" }, function() {
   //Some Code.
});
</script>

しかし、実際には、これらのマージンを削除したほうがよいでしょう。マージンのないこのFiddleを参照してください: http://jsfiddle.net/SMrcy/4/で、右にアニメーション化されています。

于 2013-05-22T09:01:51.303 に答える