如何爲幻燈片動畫設置div邊距

我正在嘗試製作只能在特定邊距內顯示的動畫。例如，我有一個從左到右（100px到500px）和從上到下（100px和500x）的正方形div。圖片在這個廣場內，圖片將從左至右進行動畫處理。我想要的是逐漸隱藏圖片，直到圖片完全隱藏。這與滑動橫幅類似。我試圖通過設置div邊緣，但沒有奏效。我正在使用jquery，但我向其他圖書館開放。任何建議，網頁或任何內容都將有所幫助。如何爲幻燈片動畫設置div邊距

這是我正在做的一個例子。該id =圖片滑動到900px，但我想要的是逐漸隱藏圖片，一旦它達到了id =平方米的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>

謝謝，喬| _

來源

2013-06-26 Joel

我想看到一些代碼，在線演示，草圖，如果確有必要，從目前什麼矗立在你的e它真的很難抓到你的意思，你想要什麼。 –

嗨，我剛剛編輯的問題，幷包括一些代碼。如果需要其他東西，請告訴我。謝謝！ – Joel

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

您需要添加溢出隱藏到廣場。

CSS：

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

此外，您加載你的庫順序錯誤。 jQueryUI之前必須加載jQuery，儘管這不是問題的關鍵。

來源

2013-06-26 01:03:54

這是通過「漸進式隱藏」來設想的，您的意思是它只是消失而不是淡出。 –

更新了jsfiddle，在動畫之前重置mousedown上的圖片，以便每次點擊時都能看到它，而不僅僅是第一次。 –

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

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

來源

2013-06-26 01:09:43

如何爲幻燈片動畫設置div邊距

回答

相關問題