1

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>
isherwood
  • 58,414
  • 16
  • 114
  • 157
Ju De
  • 11
  • 1
  • The entire UI seems quite buggy, it already works a lot better when using `find` instead of `children` which is very strange: https://jsfiddle.net/aLhj9pwk – Shikkediel Nov 08 '21 at 16:53
  • You can easily create the intended behaviour without the extra library by the way and just use [transition](https://jsfiddle.net/k9frow6n) or even set it up [without](https://jsfiddle.net/d2zyb46t) any JS, the page you took as the example only uses CSS. – Shikkediel Nov 08 '21 at 18:06
  • jQueryUI 1.9 was released in 2012. I suggest updating your version. Same with jQuery. You should be able to go to 3.x without issue. – isherwood Nov 08 '21 at 21:27

2 Answers2

0

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

  • Ok I see. It go to the end of animation right and do the next one. Is it possible to "stop" animation when i leave and not go to the end of it ? I mean, when i mouseleave, the animation really stop to the pixel where it is actually and then do the next slide to go back ? Sorry for my english :p – Ju De Nov 08 '21 at 11:19
  • I understand what you mean. I tried to mess around with it with the `stop(false,false)` function but the animation `stop(false,false)` function prevents further animations for some reason... –  Nov 08 '21 at 13:36
  • Seems like the old version of jQuery UI simply isn't working very well. – Shikkediel Nov 08 '21 at 17:34
  • I'm using the wp-enqueue wordpress. Should I try to use another jQuery version ? – Ju De Nov 08 '21 at 17:49
  • If you use the latest versions, it will definitely work a lot better. But you don't need any JS to achieve this, the example page you linked to doesn't either. – Shikkediel Nov 08 '21 at 18:02
  • That's right you can do it with CSS easily –  Nov 08 '21 at 18:06
  • Ok i didnt though it was possible ... I'm bad with CSS.... I go try, ty – Ju De Nov 08 '21 at 21:54
  • Thx, It seems more simple that I found ! I ask my answers :) Really thanks ! – Ju De Nov 09 '21 at 08:13
0

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 !

Ju De
  • 11
  • 1