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 必须在 jQueryUI 之前加载，尽管这不是手头的问题。

于 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 回答