Scripts crashing each other

Question

well my problem is hopefully easy: 3 actions that shall happen while hovering a photo. The timer at the bottom works now, the other things crashed. A Page shall open in 5 seconds and the photo shall move out of the display before. Sounds easy, doesnt it? I hope so.

Do you guys know what I can do?

Thanks already and best regards!

<script>
    var interval;  
    var timer = 5; 

    $('.HoverBalken').on({'mouseover': function () {
        timer = setTimeout(function () {
            $('.HoverBalken').toggleClass('HoverBalken-active');
            $('.N').toggleClass('N-active');
            $('.K').toggleClass('K-active');
        }, );  

        timer = setTimeout(function () {
            window.location = "FoliagePlates.html"
        }, 5000); 
    }, 'mouseover': function () {
        interval = setInterval(function() {
             timer--;
             $('.timer').text(timer);
             if (timer === 0) clearInterval(interval); 
        }, 1000);  
    }, 'mouseout' : function () {
        clearTimeout(timer);
        $('.HoverBalken').removeClass('HoverBalken-active');
        $('.N').removeClass('N-active');
        $('.K').removeClass('K-active');
        clearInterval(interval);
        timer = 5;  
        $('.timer').text(timer);
    } 
});
</script>

score 0 · Accepted Answer · answered Feb 28 '18 at 14:01

<script>
    var interval;  
    var timer = 5; 

    var timeout1,timeout2;

    $('.HoverBalken')

    .mouseover(function() {

        //use different variable than your timer
        timeout1 = setTimeout(function () {
            $('.HoverBalken').toggleClass('HoverBalken-active');
            $('.N').toggleClass('N-active');
            $('.K').toggleClass('K-active');
        }, 2000);  //forgot time here  

        //use different variable than your timer and first timeout
        timeout2 = setTimeout(function () {
            window.location = "FoliagePlates.html"
        }, 5000); 

        //stay in same scope, don't define event again
        interval = setInterval(function() {
             timer--;
             $('.timer').text(timer);
             if (timer === 0) clearInterval(interval); 
        }, 1000);  

    })

    .mouseout(function() {
        //clear both timers
        clearTimeout(timeout1);
        clearTimeout(timeout2);
        $('.HoverBalken').removeClass('HoverBalken-active');
        $('.N').removeClass('N-active');
        $('.K').removeClass('K-active');
        clearInterval(interval);
        timer = 5;  
        $('.timer').text(timer);
    });

</script>

this should fix it, notice the comments in code

Thank you veeery miuch for the help!!! Still doesnt work though...do you maybe have an other idea what could help? — Tassilo, Feb 28 '18 at 14:12
well depends on what you need. if there's any specific question i'm glad to help — Mohamad Atiye, Mar 01 '18 at 14:45

Scripts crashing each other

1 Answers1