CODEWITHSUNDEEP
javascriptjquery
Frosty
Frosty

Reputation: 334

Jquery mouseover / mouseleave

I'm not sure what to search for exactly but here is my issue.

<script>
    function Gbox () {
        var hide = document.getElementById('g-box').style.display = "none";

    }
    Gbox();
    $("#g-plus").mouseover(function () {
        $("#g-box").show(400);  
    });
    $("#g-plus").mouseleave(function () {
        $("#g-box").hide(400);  
    });

</script>

Said Jquery works without a problem.

Only issue is that if i hover in and out fast 2 times on #g-plus the Jquery runs it 4 times as in show,hide,show,hide and it looks retarded when it happens

How can i avoid this issue?

Upvotes: 1

Views: 508

Answers (2)

Arun P Johny
Arun P Johny

Reputation: 388436

What you need is .stop() to stop the previous animation

function Gbox() {
    $("#g-box").hide();
}
Gbox();
$("#g-plus").hover(function () {
    $("#g-box").stop().show(400);
}, function () {
    $("#g-box").stop().hide(400);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="g-plus">g-plus</button>
<div id="g-box">g-box</div>

Note: You can use .hover() as a short cut to register the mouseenter and mouseleave handlers

Upvotes: 5

user3227295
user3227295

Reputation: 2156

$("#g-plus").hover(function () {
    $("#g-box").show(400);  
},function () {
    $("#g-box").hide(400);  
});

Upvotes: 6

Related Questions