0

I have this navigation menu:

<nav id="hoofd_menu">
    <a href="portfolio/" title="Portfolio" target="_self" class="fade portfolio">Portfolio</a>
    <a href="blog/" title="Blog" target="_self" class="fade blog">Blog</a>
    <a href="over/" title="Over" target="_self" class="fade over">Over</a>
    <a href="contact/" title="Contact" target="_self" class="fade contact">Contact</a>
</nav>

and this function:

$(document).ready(function(){
            $("a.portfolio").click(function(e) {
                e.preventDefault();
                $('a.blog, a.over, a.contact').hide("slow");
                $(this).animate({"opacity": "1"}, "slow");
                $(this).hide("slow", function(){
                    document.location = $(this).attr('href');
                });
            });
        });

Is it possible to change the function code so it works for all four links (without duplication of it)?

The function slowly hides the other links, after this is finished it slowly hide the link itself, and follows the href after this.

4

5 回答 5

2

这个怎么样？您可以将“锚标记”用于单击事件，然后隐藏其兄弟姐妹。

$(document).ready(function(){
        $("#hoofd_menu a").click(function(e) {
            e.preventDefault();
            $(this).siblings().hide("slow");
            $(this).animate({"opacity": "1"}, "slow");
            $(this).hide("slow", function(){
                document.location = $(this).attr('href');
            });
        });
    });

链接到 jsfiddle http://jsfiddle.net/C6fKE/

于 2012-04-07T13:42:58.013 回答
0 
$(document).ready(function() {
    $("a.fade").on('click', function(e) {
        e.preventDefault();
        $(this).siblings('a.fade').hide("slow").end().delay("slow").hide("slow", function() {
            document.location = $(this).attr('href');
        });
    });
});​

小提琴

于 2012-04-07T13:50:56.943 回答
0 
<nav id="hoofd_menu">
    <a href="portfolio/" title="Portfolio" target="_self" class="fade      portfolio">Portfolio</a>
    <a href="blog/" title="Blog" target="_self" class="fade blog">Blog</a>
    <a href="over/" title="Over" target="_self" class="fade over">Over</a>
    <a href="contact/" title="Contact" target="_self" class="fade contact">Contact</a>
</nav>  

$(document).ready(function(){
    $("a.fade").click(function(e) {
        e.preventDefault();
        var me = $(this),
            rest = $('.fade').not(me).hide('slow');
        me.animate({"opacity": "1"}, "slow");
        me.hide("slow", function(){
            document.location = me.attr('href');
        });
    });
});
于 2012-04-07T13:45:49.433 回答
0

您可以选择所有fade类，不包括单击的元素，如下所示：

$("#hoofd_menu a.fade").click(function(e) {
    e.preventDefault();
    $(this).parent().find('.fade')
                    .filter(':not(a[title="' + $(this).attr('title') + '"])')
                    .hide("slow");
    $(this).animate({
        "opacity": "1"
    }, "slow");
    $(this).hide("slow", function() {
        document.location = $(this).attr('href');
    });
});​

看演示

于 2012-04-07T13:46:07.983 回答
0

当然，只需使用 .not(this) 函数从要隐藏的元素列表中删除当前元素。

$(document).ready(function(){
        $("#hoofd_menu > a").click(function(e) {
            e.preventDefault();
            $('#hoofd_menu > a').not(this).hide("slow");
            $(this).animate({"opacity": "1"}, "slow");
            $(this).hide("slow", function(){
                document.location = $(this).attr('href');
            });
        });
    });

这是一个带有更新代码的快速 jsFiddle - http://jsfiddle.net/GA7ev/1/

于 2012-04-07T13:47:15.483 回答