开发者

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);
});
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜