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.

5 Answers 5

2

How about this? You can just use the 'anchor tag' for click event and then hide its siblings.

$(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');
            });
        });
    });

Link to jsfiddle http://jsfiddle.net/C6fKE/

0
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');
        });
    });
});
1
  • thanks for your answer, .fade is not only used by this links, so this method is not preferable.
    – Waarten
    Apr 7, 2012 at 13:54
0

You can select all with the fade class, excluding the clicked element like so:

$("#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');
    });
});​

See demo

1
  • the jQuery not function will accept other jQuery objects - so you can simply use $('.fade').not($(this)) to select every other fade elements Apr 7, 2012 at 13:48
0

Sure, just use .not(this) function to remove current element from the list of elements to hide.

$(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');
            });
        });
    });

Here is a quick jsFiddle with the updated code - http://jsfiddle.net/GA7ev/1/

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');
        });
    });
});​

FIDDLE

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.