Question

我正在尝试制作一个只能在特定边距内显示的动画。例如，我有一个从左到右（100px到500px）和从上到下（100px和500x）的方形div。图片在此广场内，图片将从左到右动画。我想要的是当图片到达方形左角时逐渐隐藏图片，直到图片被完全隐藏。这类似于滑动横幅。我试过设置div边距，但没有用。我正在使用jquery，但我对其他库开放。任何建议，页面或任何内容都会有所帮助。

这是我正在做的一个例子。 id =图片滑动到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>

谢谢，乔| _

Answer 1

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

您需要在方块中添加隐藏的溢出。

CSS：

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

此外，您正在以错误的顺序加载库。必须在jQueryUI之前加载jQuery，尽管这不是问题所在。

Answer 2

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

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

如何设置幻灯片动画的div边距

2 个答案: