Delay doesn’t work, can someone help me?

Asked

Viewed 98 times

2

I was programming a simple profile and I want to put a delay after the 'mouseenter' as soon as the mouse enters this 'mouseenter' and along with delay to show a box called '.user_widget' I am using:

addClass and removeClass;

Css:

.user_widget {
    background-color: rgb(255, 255, 255);
    position: relative;
    top: 39px;
    width: 210px;
    height: 305px;
    z-index: 4;
    border-radius: 3px;
    margin: 0 auto;
    box-shadow: 0 10px 20px 0px rgba(0, 0, 0, 0.14);
}
.ativo {
    display: block !important;
    background-color: rgb(255, 255, 255)!important;
}
.desativado {
    display: none !important;
}

HTML and Javascript:

<div class="user_widget desativado">    

<script type="text/javascript">
$(".user").click(function(){
    $('.user_widget').addClass('desativado');
    $('.user_widget').removeClass('ativo');
    $('.user').removeClass('ativo');
});
</script>
<script type="text/javascript">
    $(".user").mouseenter(function(){

    $('.user_widget').removeClass('desativado');
    $('.user').addClass('ativo');
    $('.user_widget').addClass('ativo');
});
</script>
javascript html css

2 answers

0


Change your mouseenter function to look like this: 

<script type="text/javascript">
     //variavel global 
     var delay = 2000; 

     function mouseEnter(){
        $('.user_widget').removeClass('desativado');
        $('.user').addClass('ativo');
        $('.user_widget').addClass('ativo');
     }
</script>

And for the call, you put in your element "user" the command calling the function this way: 

onmouseover="setTimeout(mouseEnter,delay);"

  • Hello Rafa, only type guy, I’m using background to change the color of the user behind when entering the mouseenter, only it’s very fast; Look at a print: http://prntscr.com/fnd18r I’m new to javascript yet :/

  • Okay, I’ve changed, take a look at this way, very simple and do what you want

  • Then Rafa I put like this: <div class="user" onmouseenter="setTimeout(mouseEnter,delay);"> Only that nothing happened when I pass the mouse.

  • replace with onmouseover="javascript:setTimeout(mouseEnter,delay);"

  • Nothing happens, http://prntscr.com/fnd87s error in javascript : http://prntscr.com/fnd8jr

  • prints the "user class"

  • http://prntscr.com/fnda1m

  • what are the attributes of your user class? you have a css for it?

  • .user { border-Radius: 50%; background-color: rgba(255, 255, 255, 0.76); opacity: 1; position: relative; z-index: 7; top: 14px; width: 24px; height: 29px; margin: 0 auto; padding-left: 13px; padding-top: 8px; left: 1px; }

  • Rafa discovered, you forgot to close mano kk, $('.user_widget'). addClass('active'); }; </script>

  • ok I will edit the answer, if it worked, indicate the answer as solution

  • Only there’s one more brother, you see I used the click too? As soon as I give this Hover, I want it to stay active, and then I click and it closes, you can help me with that?

  • this is because its class "disabled" is receiving a "display:None;" so it will make the element disappear

  • But using javascript, I give one. click on it and add class "active" with "display: block", I put so, only when I take the mouse the onmouseover continues with the effect of it.

  • these two methods work differently, read the jquery documentation first, then try redoing your question https://api.jquery.com/mouseover/ https://api.jquery.com/click/

  • I’ll take a look Rafa, thanks, what I want is a delay as soon as I pass the mouse over the "user", a delay of 1s, only I want to leave the "user_widget" active without closing, and then when I click on the "user" again it closes with "display: None" which would be the class "disabled".

Show 11 more comments

0

People should be a simple code that I’m not able to do, what I want to do is like this, when passing the mouse over the class "user" that would be "mouseenter" would activate the class "enabled" and remove the class "disabled";

The class "enabled" is "display: block" and the class "disabled" is the "display: None", at the beginning I put to not appear that would be "user_widget disabled" so when you pass the mouse activates the call "mouseenter" and would look like "user_widget enabled"then tu well, what I want is a delay in it of 1s, because it is appearing very fast, but I want to keep the two calls to "mouseenter" and the "click" that is when click on the "user" remove the "enabled" and add "disabled" back.

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.