我正在尝试制作只能在特定边距内显示的动画。例如，我有一个从左到右(100px 到 500px)和从上到下(100px 和 500x)的正方形 div。图片在这个正方形内，图片将从左到右动画。我想要的是当图片到达左方形 Angular 时逐渐隐藏图片，直到图片完全隐藏。这类似于滑动横幅。我试过设置 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>
谢谢， 乔|_
最佳答案
jsfiddle:http://jsfiddle.net/jZaxW/1/
需要在正方形中添加overflow hidden。
CSS:
body{ background-color:#94B8B8;}
#square{overflow:hidden;}
此外，您以错误的顺序加载库。 jQuery 必须在 jQueryUI 之前加载，尽管这不是当前的问题。
关于javascript - 如何设置幻灯片动画的div边距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17309615/