How do I add time delay

Question

I would like to add a custom class on mouseover. So that when the mouse is hovered over .leftbar, a class is added and it should be popped up(I set css for his). How do I add slow or time delay for the popup?

<script>
$(document).ready(function(){
$( ".leftbar" ).mouseenter(function() {
$( "body" ).addClass( "myclass" );
});
});

$(document).ready(function(){
$( ".leftbar" ).mouseleave(function() {
$( "body" ).removeClass( "myclass1" );
});
});
</script>

I tried this- $( "body" ).addClass( "myclass" , '300'); with no luck

Thank you!

Have a look at http://stackoverflow.com/questions/2510115/jquery-can-i-call-delay-between-addclass-and-such — r8n5n, Oct 20 '14 at 14:57

score 0 · Answer 1 · answered Oct 20 '14 at 14:55

You can use setTimeout

$(document).ready(function(){
    $( ".leftbar" ).mouseenter(function() {
        window.setTimeout(function(){
            $( "body" ).addClass( "myclass" );
        }, 300);
    });
}):

See https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers.setTimeout

George · Answer 2 · 2014-10-20T15:01:30.420

0

Use a setTimeout, being sure to clear it when the cursor leaves.

Minor error, but myclass != myclass1.

$(document).ready(function(){
    var barTimeout = 0;
    $( ".leftbar" ).on({
        mouseenter: function(){
            barTimeout = setTimeout(function(){
                $( "body" ).addClass( "myclass" );
            }, 300);
        },
        mouseleave: function(){
            if( typeof barTimeout !== 'undefined' ) clearTimeout( barTimeout );
            $( "body" ).removeClass( "myclass" );
        }
    });
});

JSFiddle

edited Oct 20 '14 at 15:01

answered Oct 20 '14 at 14:56

George

36,413
9
66
103

Thanks a lot! This works. I am failing to add easing effect to this code - http://jsfiddle.net/3ts4tb8a/. Can you please help? – Netizen Oct 20 '14 at 16:08

score 0 · Answer 3 · answered Oct 20 '14 at 14:57

0

You could take a look at the jQuery UI method addClass which allows you to pass in some animation parameters into it. View the example and documentation here http://api.jqueryui.com/addClass/

For your use, it should be as simple as adding in the delay to addClass()

Add a reference to the jQuery Library, then change your code to;

$("body").addClass("myclass", 300);

answered Oct 20 '14 at 14:57

Tim B James

20,084
4
73
103

Did you add the reference the jQueryUI? – Tim B James Oct 20 '14 at 15:09
yes, please take a look at the pastebin code- http://pastebin.com/7qr8yh27. I tried an easing effect. – Netizen Oct 20 '14 at 15:12
in your example you have `removeClass` on both enter and leave? – Tim B James Oct 20 '14 at 15:22

score 0 · Answer 4 · answered Oct 20 '14 at 16:09

0

You can do it like this:

$(document).ready(function () {
    $(".leftbar").hover( function () {
        $(this).delay(300).queue(function(next){
            $(this).addClass("myclass");
            next();
        });
    }, function(){
        $(this).delay(300).queue(function(next){
            $(this).removeClass("myclass");
            next();   
        });
    });
});

Check it out here: JSFiddle

answered Oct 20 '14 at 16:09

Johan Karlsson

6,419
1
19
28

Can you help adding an easing effect? This is what I tried - http://jsfiddle.net/3ts4tb8a/ . – Netizen Oct 22 '14 at 04:00

How do I add time delay

4 Answers4