jQuery issue - mouserover/mouseout too fast-CodePudding

I would like to have a Slide on the same div (for example, the 2 box u can see here : https://braintogain.fr/)

I tried this code, but I have an issue... When the mouse out too fast, the second event is skipped... and the yellow box stays ...

I would like it appears when the mouseover (or mousenter) and it hides when the mouseout (or mouselave).

Here is my code : https://jsfiddle.net/976mLshn/1

Thx :)

.item_menu {
  width: 200px;
  height: 100px;
  background: red;
}

.titre {
  width: 200px;
  height: 100px;
  background: yellow;
}

li {
  list-style-type: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>

<li id='category_1'>
  <div class='item_menu'>
    <div class='titre' style='display:none;'>menu 1 title</div>
  </div>
</li>
<li id='category_2'>
  <div class='item_menu'>
    <div class='titre' style='display:none;'>menu 2 title</div>
  </div>
</li>

<script>
  $('.item_menu').mouseover(function() {
    $(this).children('.titre').show('slide', {
      direction: 'right'
    });
  });

  $('.item_menu').mouseout(function() {
    $(this).children('.titre').hide('slide', {
      direction: 'right'
    });
  });
</script>

CodePudding user response：

You can finish the animation and then call the next animation.

Also mouseenter and mouseleave are more accurate in this scenario

$('.item_menu').mouseenter(function(){
    $(this).children('.titre').show('slide', {direction:'right'});
});

$('.item_menu').mouseleave(function(){
    $(".titre").stop(true,true);
    $(this).children('.titre').hide('slide', {direction:'right'});
});

UPDATE: I've managed to find a solution, modified it a little, CSS only and works exactly as expected.

Check the fiddle below

http://jsfiddle.net/tm9u4fhd/

Just modify the CSS according to your needs and it works like a charm!

Original answer: CSS 3 slide-in from left transition

CodePudding user response：

Re,

Thx @ all of you.

I tried use CSS only, and it works. Here is my proposition : https://jsfiddle.net/vswoghm9/

<div style='width: 330px;float:left;padding:10px;'>
        <div class='riddle-item riddle-item--gold'>
            <div style='background-color: red;height:100px;'>
                        
                            <div style='text-align:center;'>Back</div>
                            

            </div>
                            <a class='riddle-item-link riddle-item-link--gold' href='#'>
                                <div class='riddle-item-link-logo'>
                                    Front
                                </div></a>
        </div>
    </div>

and the CSS :

.riddle-item{overflow:hidden;position:relative;color:#fff;cursor:pointer}
.riddle-item:hover .riddle-item-link{left:0}
.riddle-item-link{border:transparent 3px solid;position:absolute;z-index:2;left:100%;top:0;height:100%;width:100%;text-align:center;-webkit-transition:left .2s ease-in-out;-moz-transition:left .2s ease-in-out;-ms-transition:left .2s ease-in-out;-o-transition:left .2s ease-in-out;transition:left .2s ease-in-out;cursor:pointer;text-decoration:none!important;justify-content:center;align-items:center}
.riddle-item-link--gold{border-color:#86693d;background-color:#514025}

Thank you again !