CODEWITHSUNDEEP
jquery
Digital Lightcraft
Digital Lightcraft

Reputation: 465

Introduce a small delay before firing jquery slideToggle()

I have a simple bottom menu bar that stays mostly hidden, until someone mouses over a transparent div. at which point the bottom menu bar is slideToggle() 'ed

<script type="text/javascript">
         $(document).ready(function () {

                $('#bottomBoxThinCover').on("mouseover", function () {
                    $('#bottomBox').slideToggle();

                });

                $('#bottomBox').on("mouseleave", function () {
                    $('#bottomBox').slideToggle();

                });
        });
 </script>

However if someone just moves the mouse over it by mistake, it still pops up and is annoying. How can I delay this action a little (say 0.5s), based on a mouse pointer having to wait over the transparent div for it to fire?

Upvotes: 1

Views: 453

Answers (1)

dfsq
dfsq

Reputation: 193261

You can do it by adding a little timeout with setTimeout function:

$('#bottomBoxThinCover').on("mouseover", function () {
    $(this).data('over', setTimeout(function() {
        $('#bottomBox').slideToggle();
    }, 500));
})
.on('mouseout', function() {
    clearTimeout($(this).data('over'));
});

The idea is that you setup a timeout on mouseover, and clear it on mouseout. For saving timeout id you can use element data storage.

Demo: http://jsfiddle.net/b62bhtab/

Upvotes: 2

Related Questions