2

特定のマージン内でのみ表示する必要があるアニメーションを作成しようとしています。たとえば、左から右へ (100px から 500px)、上から下へ (100px と 500x) の正方形の div があります。この正方形の中に画像があり、画像は左から右にアニメーション化されます。私が望むのは、画像が完全に非表示になるまで、正方形の左隅に到達したときに画像を徐々に非表示にすることです。これはスライド バナーに似たものです。div マージンを設定してみましたが、うまくいきませんでした。私は jquery を使用していますが、他のライブラリも使用できます。提案、ページ、または何でも役に立ちます。

これは私がやっていることの例です。id=picture は 900px までスライドしていますが、id=square の 500px に達したら、画像を徐々に非表示にしたいと考えています。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="js/jquery-1.10.1.js"></script>

<style>
body{ background-color:#94B8B8;}
</style>
</head>
<body><!--border-color:white-->

<div id="square" style = "width:500px;height:500px;background-color:blue;position:relative;">
<div id="picture" style = "width:100px;height:100px;background-color:white;position:relative;top:50px;left:50px;"></div>
</div>
</body>
</html>

<script type="text/javascript">

$(document).ready(function(){
    $('html').mousedown(function(e){
        $("#picture").animate({left:"900px"},1000);
  });
});

</script>

ありがとう、ジョー|_

4

2 に答える 2

1

jsfiddle: http://jsfiddle.net/jZaxW/1/

正方形に隠されたオーバーフローを追加する必要があります。

CSS:

body{ background-color:#94B8B8;}
#square{overflow:hidden;}

また、ライブラリを間違った順序でロードしています。jQuery UI の前に jQuery をロードする必要がありますが、それは当面の問題ではありません。

于 2013-06-26T01:03:54.847 に答える
0

http://jsbin.com/unoqew/1/edit

$(document).ready(function(){
    $('html').mousedown(function(e){
        $("#picture").animate({left:350, opacity:0},1000);
    });
});
于 2013-06-26T01:09:43.510 に答える