動畫div從右側滑動

我是網頁設計的初學者。我右邊有一個導航欄。我定義了李的類。我希望我所有的李都能生動並從右側出現。動畫div從右側滑動

我無法做到這一點。需要一些幫助。我的HTML和CSS代碼是。對於李

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" href="index.css"> 
<script src="jquery.js"> </script> 
<script> 
$(function(){ 
    $(".content-box-blue").animate({width:'350px'},1200); 
    $(".content-box-gray").animate({width:'250px'},1200); 
    $(".content-box-green").animate({width:'300px'},1200); 
    $(".content-box-purple").animate({width:'400px'},1200); 
    $(".content-box-red").animate({width:'200px'},1200); 
    $(".content-box-yellow").animate({width:'250px'},1200); 
}); 
</script> 
<title>Demo</title> 
</head> 
<body> 
<header> 
</header> 

<nav> 
    <ul> 
     <li class="content-box-blue"> </li> 
     <li class="content-box-gray"> </li> 
     <li class="content-box-green"> </li> 
     <li class="content-box-purple"> </li> 
     <li class="content-box-red"> </li> 
     <li class="content-box-yellow"> </li> 
    </ul> 
</nav> 

<footer> 
</footer>

CSS代碼是

ul { 
list-style-type: none; 
margin: 0; 
padding: 0; 
float: right; 
} 
li { 
margin: 0; 
padding: 0; 
margin-bottom: 20px; 
} 
nav { 
float: right; 
width: 400px; 
height: 500px; 
margin-top: 35px; 
margin-right: 10px; 
background-color: #ffffff; 
} 
.content-box-blue { 
background-color: #00bfff; 
border: 1px solid #afcde3; 
height: 50px; 
width: 0px; 
margin-left: 50px; 
border-top-left-radius: 8% 50%; 
border-bottom-left-radius: 8% 50%; 
} 
.content-box-gray { 
background-color: #FF69B4; 
border: 1px solid #bdbdbd; 
height: 50px; 
width: 0px; 
margin-left: 150px; 
border-top-left-radius: 12% 50%; 
border-bottom-left-radius: 12% 50%; 
} 
.content-box-green { 
background-color: #3CB371; 
border: 1px solid #b2ce96; 
height: 50px; 
width: 0px; 
margin-left: 100px; 
border-top-left-radius: 9% 50%; 
border-bottom-left-radius: 9% 50%; 
} 
.content-box-purple { 
background-color:#9370DB; 
border: 1px solid #bebde9; 
height: 50px; 
width: 0px; 
margin-left: 0px; 
border-top-left-radius: 6% 50%; 
border-bottom-left-radius: 6% 50%; 
} 
.content-box-red { 
background-color: #FF0000; 
border: 1px solid #e9b3b3; 
height: 50px; 
width: 0px; 
margin-left: 200px; 
border-top-left-radius: 13% 50%; 
border-bottom-left-radius: 13% 50%; 
} 
.content-box-yellow { 
background-color: #FFA500; 
border: 1px solid #fadf98; 
height: 50px; 
width: 0px; 
margin-left: 150px; 
border-top-left-radius: 12% 50%; 
border-bottom-left-radius: 12% 50%; 
}

來源

2013-03-18 shubendrak

添加。

li{ clear:right; float: right; }

來源

2013-03-18 06:54:27

它適合我。萬分感謝 – shubendrak 2013-03-18 07:52:44

你可以做一個漂浮在<li>的

這裏的權利是一個demo

來源

2013-03-18 06:33:19 Reigel

float：right;在這樣做它不開始動畫我的彩色框從它的位置 – shubendrak 2013-03-18 07:47:01

添加'明確：兩者;'就像演示... – Reigel 2013-03-18 07:49:09

它的工作。感謝 – shubendrak 2013-03-18 07:57:16

更改所有border-left-radius至right個半徑並按照你的CSS樣式表來float:leftright

ul { 
list-style-type: none; 
margin: 0; 
padding: 0; 
float: left; 
} 
li { 
margin: 0; 
padding: 0; 
margin-bottom: 20px; 
} 
nav { 
float: left; 
width: 400px; 
height: 500px; 
margin-top: 35px; 
margin-right: 10px; 
background-color: #ffffff; 
} 
.content-box-blue { 
background-color: #00bfff; 
border: 1px solid #afcde3; 
height: 50px; 
width: 0px; 
margin-right: 50px; 
border-top-right-radius: 8% 50%; 
border-bottom-right-radius: 8% 50%; 
} 
.content-box-gray { 
background-color: #FF69B4; 
border: 1px solid #bdbdbd; 
height: 50px; 
width: 0px; 
margin-right: 150px; 
border-top-right-radius: 12% 50%; 
border-bottom-right-radius: 12% 50%; 
} 
.content-box-green { 
background-color: #3CB371; 
border: 1px solid #b2ce96; 
height: 50px; 
width: 0px; 
margin-right: 100px; 
border-top-right-radius: 9% 50%; 
border-bottom-right-radius: 9% 50%; 
} 
.content-box-purple { 
background-color:#9370DB; 
border: 1px solid #bebde9; 
height: 50px; 
width: 0px; 
margin-left: 0px; 
border-top-right-radius: 6% 50%; 
border-bottom-right-radius: 6% 50%; 
} 
.content-box-red { 
background-color: #FF0000; 
border: 1px solid #e9b3b3; 
height: 50px; 
width: 0px; 
margin-right: 200px; 
border-top-right-radius: 13% 50%; 
border-bottom-right-radius: 13% 50%; 
} 
.content-box-yellow { 
background-color: #FFA500; 
border: 1px solid #fadf98; 
height: 50px; 
width: 0px; 
margin-right: 150px; 
border-top-right-radius: 12% 50%; 
border-bottom-right-radius: 12% 50%; 
}

DEMO

來源

2013-03-18 06:44:02 Sowmya

這樣做會將導航框移到頁面的左側。我希望導航盒位於右側。和所有的彩色框從右邊的位置開始動畫。 – shubendrak 2013-03-18 07:50:01

動畫div從右側滑動

回答

相關問題