Search code examples
jqueryhtmlhyperlinkmouseoveranimated

Can not click on link in jquery animated div?


I'm having this problem :

I have some divs wich are animated with jquery, and I need some links in them. I put the links in normal "html a href's"..

Is there a way to make this possible? I've been searching the internet for two days now, and even asked a teacher webdesign, but we can not find anything helpfull.

This is the site I'm working on :

http://designchitchat.be/bart/vuurdood-site/

Thanks in advance!


Solution

  • You have to test if the target is an "a" element or not

    I made an jsfiddle, you can test the link i put in "Links" box

    http://jsfiddle.net/7QJPH/5/

    You can also test this javascript, it's only work with the "links" box, you have to duplicate for other parts

    $(document).ready(function() {
        $('#kogelclip').draggable();
        $('#vulpen').draggable();
        $('#bio').toggle(function() {
            $(this).animate({
                top: '+=390'
            }, {
                duration: 750,
                easing: 'swing'
            });
    
        }, function() {
            $(this).animate({
                top: '-=390'
            }, {
                duration: 750,
                easing: 'swing'
            });
        });
    
    
    
        $('#discografie').toggle(function() {
            $(this).animate({
                left: '+=560'
            }, {
                duration: 750,
                easing: 'swing'
            });
    
        }, function() {
            $(this).animate({
                left: '-=560'
            }, {
                duration: 750,
                easing: 'swing'
            });
        });
        $('#links').toggle(function(event) {
            if (!$(event.target).is('a')) {
    
                $(this).animate({
                    right: '+=560'
                }, {
                    duration: 750,
                    easing: 'swing'
                });
    
            } else {
                document.location.href = $(event.target).attr('href');
            }
        }, function(event) {
            if (!$(event.target).is('a')) {
                $(this).animate({
                    right: '-=560'
                }, {
                    duration: 750,
                    easing: 'swing'
                });
            } else {
                document.location.href = $(event.target).attr('href');
            }
        });
    
    
    });