jQuery function display 2 times

Question

I have the following jQuery function but i dont know why is it display again after i waived the hover. The concept is, if the class is exist remove them after that load the new menu (from 1.php), wait 1000 and add new classes. Its working fine, but after i move my mouse to other dierction the concept run again. Why?

$(document).ready(function () {
    $("#cikkek").hover(function () {
        $("div.navbar2").removeClass("visible");
        $("div.logo-rotate").removeClass("logo-rotate2");
        $("a.font-visibility").removeClass("font-visible");
        $("div.block1").load("1.php");
        setTimeout(function () {
            $("div.navbar2").addClass("visible");
            $("div.logo-rotate").addClass("logo-rotate2");
            $("a.font-visibility").addClass("font-visible");
        }, 1000);
    });
});

If you don't provide a second function to hover, it will do the same thing when you un-hover. Did you mean mouseenter? — Niet the Dark Absol
– Niet the Dark Absol, Commented Aug 14, 2016 at 12:43

Darren · Accepted Answer · 2016-08-14 12:48:36Z

1

jQuery hover binds 2 events, mouseenter and mouseleave so it will fire twice.

You can either have an empty mouseleave function or rather than using hover change it to mouseenter

$("div").mouseenter(function() {
     $(this).css("background-color", "blue");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<div>
  Enter your mouse here
</div>

edited Aug 14, 2016 at 12:48

answered Aug 14, 2016 at 12:43

Darren

71.2k24 gold badges141 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery function display 2 times

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related