动画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从右侧滑动

回答

相关问题