$("#1").bind("click",function(){
$("span").animate({ left: "-=100px"},"slow",function(){})
})
$("#2").bind("click",function(){
$("span").animate({ left: "+=100px"},"slow",function(){})
})
</script>
$("span").animate({ left: "-=100px"},"slow",function(){})
})
$("#2").bind("click",function(){
$("span").animate({ left: "+=100px"},"slow",function(){})
})
</script>
头文件的css<style type="text/css">
span
{
position:absolute;
width:80px;
height:80px;
border: solid 1px #ccc;
margin: 0px 8px;
background-color: Red;
color:White;
vertical-align:middle
}
</style>
span
{
position:absolute;
width:80px;
height:80px;
border: solid 1px #ccc;
margin: 0px 8px;
background-color: Red;
color:White;
vertical-align:middle
}
</style>
$(function () {
$("span").animate({
left: "+=100px"
}, 3000, function () {
$("span").animate({
height: '+=30px',
width: '+=30px'
}, 3000, function () {
$("#tip").html("执行完成!");
});
});
});
$("span").animate({
left: "+=100px"
}, 3000, function () {
$("span").animate({
height: '+=30px',
width: '+=30px'
}, 3000, function () {
$("#tip").html("执行完成!");
});
});
});
2016-07-15
$(function () {
$("span").animate({
width: "80px",
height: "80px"
},
3000, function () {
$("#tip").html("执行完成!");
});
});
</script>
$("span").animate({
width: "80px",
height: "80px"
},
3000, function () {
$("#tip").html("执行完成!");
});
});
</script>
2016-07-15
可惜只能指定第五个的id局限性比较大
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li id=5>5</li>
<li style="display:none" >隐藏的</li>
<a>更多</a>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li id=5>5</li>
<li style="display:none" >隐藏的</li>
<a>更多</a>
</ul>
<script type="text/javascript">
$("a").click( function ()
{
if($("a").html() == "更多")
{
$("li:hidden").show();
$("a").html("简化");
}
<script type="text/javascript">
$("a").click( function ()
{
if($("a").html() == "更多")
{
$("li:hidden").show();
$("a").html("简化");
}
else if($("a").html() == "简化")
{
$("li:visible").hide();
$("#5").show();
}
});
</script>
</body>
{
$("li:visible").hide();
$("#5").show();
}
});
</script>
</body>