1

各liが小さな「タイル」であり、( animate() を使用して)クリックで展開および縮小する順序なしリストを作成しようとしています。リーが拡大するところまで持っていますが、再び縮小する方法がわかりません。

コードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="jquery.animate-colors-min.js"></script>


<style type="text/css">
 ul#tiles {
margin:0;
padding:0;
list-style-type:none;
width:300px;
}
ul#tiles li {
float:left;
width:72px;
height:72px;
border:1px solid black;
background:#09F;
margin:10px;
overflow:hidden;
 }
ul#tiles li a { 
}

</style>




<script>
$(document).ready(function() {
    $("li.closed a").click(function(){
        $(this).parent()
            .animate({height:"300px"},{duration: 400, queue: false })
            .animate({width:"300px"},{duration: 400, queue: false })
            .animate({backgroundColor:"#fff"},{duration: 400, queue: false })
            .attr("class","open")
        ;
        $(this).text("Close");
    }); // closes click on "li.closed a"
    $("li.open a").click(function(){
        $(this).parent()
            .animate({height:"72px"},{duration: 400, queue: false })
            .animate({width:"72px"},{duration: 400, queue: false })
            .animate({backgroundColor:"#09f"},{duration: 400, queue: false })
            .attr("class","closed")
        ;           
        $(this).text("Open");
    }); // closes click on "li.closed a"
}); // closes document ready function
</script>



</head>
<body>


<ul id="tiles">
<li class="closed"><a href="#">Open</a><br />Lorem ipsum dolor sit amet</li>
<li class="closed"><a href="#">Open</a><br />Lorem ipsum dolor sit amet</li>
<li class="closed"><a href="#">Open</a><br />Lorem ipsum dolor sit amet</li>
<li class="closed"><a href="#">Open</a><br />Lorem ipsum dolor sit amet</li>
<li class="closed"><a href="#">Open</a><br />Lorem ipsum dolor sit amet</li>
<li class="closed"><a href="#">Open</a><br />Lorem ipsum dolor sit amet</li>
</ul>


</body>
</html>
4

2 に答える 2