CODEWITHSUNDEEP
jqueryurlanimationhyperlink
Tina Malina
Tina Malina

Reputation: 141

Animate whole menu before going to url, with jquery

I have a menu that's about 200px from the top of the page. When a link inside the menu is clicked, I want the menu to slide to the top of the page, and only then to proceed to the URL.

I got close using advice from similar questions here but I can't get it to work perfectly.

Here's the jsfiddle. http://jsfiddle.net/tinat/b55k98dz/1/

The problem is that jquery is not getting the URL from the link? Note: in the jsfiddle all links are the same but in reality they would all be different, so I don't want to define a specific URL in the jquery code, I want the jquery to get the URL from the link's href attribute and take the browser to it, once the animation of the wrapper div is over.

HTML:

<div id="alllinks"> 
 <a class="link" href="http://www.google.com" target="_blank">Click me 1</a>
 <a class="link" href="http://www.google.com" target="_blank">Click me 2</a>
 <a class="link" href="http://www.google.com" target="_blank">Click me 3</a>
 <a class="link" href="http://www.google.com" target="_blank">Click me 4</a>
</div>

jquery:

$('.link').on('click', function (e) {
    e.preventDefault();
    $('#alllinks').animate({
        top: '0px',
    }, 1000, function () {
        document.location.href = this.href;
    });
});

CSS:

#alllinks {
    position: absolute;
    top: 200px;
    left: 0;
    background-color: #c00;
    color: #000;
}
.link {
    display: block;
    width: 100px;
    height: 20px;
    float: left;
    margin-right: 5px;
}

All help appreciated!

Upvotes: 1

Views: 347

Answers (1)

shammelburg
shammelburg

Reputation: 7308

Try this in your code (doesn't seem to work in the Fiddle),

We get the href from the element clicked and then pass that to the window.location.href method.

$('.link').on('click', function (e) {
    var link = $(this).attr('href');
    e.preventDefault();
    $('#alllinks').animate({
        top: '0px',
    }, 1000, function () {
        window.location.href = link;
    });
});

Upvotes: 3

Related Questions