Toggle animate links
I want to toggle the width of links in the following code. Its working but I want the width to revert when I click the another link thereby remaining with one extended link, I hope I make sense.
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//animate links
$(".nav_links li a.link").toggle(function(){
$(this).animate({width:237},200);
},function(){
$(this).animate({width:72},200);
});
});
</script>
</head>
<body>
<ul>
<li>开发者_如何学编程;<a href="#" class="about link"></a></li>
many other links here
</ul>
</body>
</html>
I wouldn't use toggle for this, because it's good for one thing - toggle on/off of a singly selected item/group. What you're trying to do is reset other items while switching on one. Try something like this instead:
$(".nav_links li a.link").click(function(){
// Reset all links.
$(".nav_links li a.link").animate({width:72},200);
// Set currently clicked on as necessary.
$(this).animate({width:237},200);
});
精彩评论