如何延迟在鼠标按下时jquery隐藏直到CSS动画完成？

Question

Trying to put a menu together, and having some trouble with one behavior.

Have a set of sub-menu divs hidden behind the main menu divs. Upon click, the sub-menu is shown and animates into view.

I'm able to see the animation when the sub-menus are shown, but not when when they toggle back to hidden. I've tried a few different things to get it to behave the way I want, but no joy.

Here's the code:

 $(document).ready(function() { $(document).on('mouseenter mouseleave', '.circle.hover-effect', function (event) { $(this).toggleClass("active", event.type === 'mouseenter'); }); $('.menu').hide(); $('.circle').on('mousedown touchstart', function() { $('.circle').toggleClass('hover-effect'); $(this).toggleClass('selected'); $('.circle').not(this).removeClass('selected'); if ($(this).hasClass('selected')) { $('.circle').not(this).addClass('behind'); $(this).prev().show('fast'); $(this).prev().find('.menu-item1').removeClass('menu-item-desel').addClass('menu-item1-sel'); $(this).prev().find('.menu-item2').removeClass('menu-item-desel').addClass('menu-item2-sel'); } else { $('.circle').removeClass('behind'); $('.circle').prev().hide('fast'); $(this).prev().find('.menu-item1').removeClass('menu-item1-sel').addClass('menu-item-desel'); $(this).prev().find('.menu-item2').removeClass('menu-item2-sel').addClass('menu-item-desel'); } }); }); 

 * { box-sizing: border-box; margin: 0; padding: 0; } body { background: -ms-linear-gradient(90deg, #16222A 10%, #3A6073 90%); /* IE10 */ background: linear-gradient(90deg, #16222A 10%, #3A6073 90%); /* W3C */ } .grid { display: flex; flex-wrap: wrap; width: 90%; height: 450px; margin: auto; overflow: hidden; padding: 10px 10px; } .cell { flex-basis: 33.3%; display: flex; justify-content: center; align-items: center; border: 2px solid transparent; } .cell::before { padding-bottom: 100%; display: block; content: ''; } .menu { position: relative; top: 100px; left: 100px; } .menu-item { width: 60px; height: 60px; background-color: dimGray; border-radius: 50%; position: absolute; color: white; text-align: center; line-height: 70px; z-index: 19; } .menu-item a { color: white; transition: 0.35s; } .menu-item a:hover { color: black; } .menu-item1 { transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55); } .menu1 .menu-item1-sel { transform: translate(0px, 125px); } .menu1 .menu-item2-sel { transform: translate(60px, 105px); } .menu-item2 { transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.2s; } .menu2 .menu-item1-sel { transform: translate(0px, 125px); } .menu2 .menu-item2-sel { transform: translate(60px, 105px); } .menu-item-desel { transform: none; } .circle { position: relative; background: #ccc; border-radius: 50%; width: 200px; height: 200px; margin: 0 auto 1em; transition: all 0.3s; z-index: 20; cursor: pointer; opacity: 1; } .active { transform: scale(1.1); } .selected { background: red; z-index: 20; } .behind { opacity: 0.1; z-index: 18; cursor: default; pointer-events: none; } .caption { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <div class="grid"> <div class="cell col1"> <div class="inner"> <div class="menu menu1"> <div class="menu-item menu-item1"><a href="/home.aspx"><i class="fa fa-user fa-2x"></i></a></div> <div class="menu-item menu-item2"><a href="/home.aspx"><i class="fa fa-graduation-cap fa-2x"></i></a></div> </div> <div class="circle hover-effect"> <div class="caption"> <h2>Header 1</h2> <h3>Subtitle 1</h3> </div> </div> </div> </div> <div class="cell col1"> <div class="inner"> <div class="menu menu2"> <div class="menu-item menu-item1"><i class="fa fa-envelope-o fa-2x"></i></div> <div class="menu-item menu-item2"><i class="fa fa-code fa-2x"></i></div> </div> <div class="circle hover-effect"> <div class="caption"> <h2>Header 2</h2> <h3>Subtitle 2</h3> </div> </div> </div> </div> </div> 

And here's the fiddle: JSfiddle

Any help would be greatly appreciated! Thanks, and have a great day!

Answer 1

1. Add delay when hiding the div. Div should perform the effect first before hiding use setTimeout

Executes a function, after waiting a specified number of milliseconds.

 $(document).ready(function() { $(document).on('mouseenter mouseleave', '.circle.hover-effect', function (event) { $(this).toggleClass("active", event.type === 'mouseenter'); }); $('.menu').hide(); $('.circle').on('mousedown touchstart', function() { $('.circle').toggleClass('hover-effect'); $(this).toggleClass('selected'); $('.circle').not(this).removeClass('selected'); if ($(this).hasClass('selected')) { $('.circle').not(this).addClass('behind'); $(this).prev().show('fast'); $(this).prev().find('.menu-item1').removeClass('menu-item-desel').addClass('menu-item1-sel'); $(this).prev().find('.menu-item2').removeClass('menu-item-desel').addClass('menu-item2-sel'); } else { $('.circle').removeClass('behind'); $(this).prev().find('.menu-item1').removeClass('menu-item1-sel').addClass('menu-item-desel'); $(this).prev().find('.menu-item2').removeClass('menu-item2-sel').addClass('menu-item-desel'); setTimeout(function(){ $('.circle').prev().hide('fast'); }, 1000); } }); }); 

 * { box-sizing: border-box; margin: 0; padding: 0; } body { background: -ms-linear-gradient(90deg, #16222A 10%, #3A6073 90%); /* IE10 */ background: linear-gradient(90deg, #16222A 10%, #3A6073 90%); /* W3C */ } .grid { display: flex; flex-wrap: wrap; width: 90%; height: 450px; margin: auto; overflow: hidden; padding: 10px 10px; } .cell { flex-basis: 33.3%; display: flex; justify-content: center; align-items: center; border: 2px solid transparent; } .cell::before { padding-bottom: 100%; display: block; content: ''; } .menu { position: relative; top: 100px; left: 100px; } .menu-item { width: 60px; height: 60px; background-color: dimGray; border-radius: 50%; position: absolute; color: white; text-align: center; line-height: 70px; z-index: 19; } .menu-item a { color: white; transition: 0.35s; } .menu-item a:hover { color: black; } .menu-item1 { transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55); } .menu1 .menu-item1-sel { transform: translate(0px, 125px); } .menu1 .menu-item2-sel { transform: translate(60px, 105px); } .menu-item2 { transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.2s; } .menu2 .menu-item1-sel { transform: translate(0px, 125px); } .menu2 .menu-item2-sel { transform: translate(60px, 105px); } .menu-item-desel { transform: none; } .circle { position: relative; background: #ccc; border-radius: 50%; width: 200px; height: 200px; margin: 0 auto 1em; transition: all 0.3s; z-index: 20; cursor: pointer; opacity: 1; } .active { transform: scale(1.1); } .selected { background: red; z-index: 20; } .behind { opacity: 0.1; z-index: 18; cursor: default; pointer-events: none; } .caption { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <div class="grid"> <div class="cell col1"> <div class="inner"> <div class="menu menu1"> <div class="menu-item menu-item1"><a href="/home.aspx"><i class="fa fa-user fa-2x"></i></a></div> <div class="menu-item menu-item2"><a href="/home.aspx"><i class="fa fa-graduation-cap fa-2x"></i></a></div> </div> <div class="circle hover-effect"> <div class="caption"> <h2>Header 1</h2> <h3>Subtitle 1</h3> </div> </div> </div> </div> <div class="cell col1"> <div class="inner"> <div class="menu menu2"> <div class="menu-item menu-item1"><i class="fa fa-envelope-o fa-2x"></i></div> <div class="menu-item menu-item2"><i class="fa fa-code fa-2x"></i></div> </div> <div class="circle hover-effect"> <div class="caption"> <h2>Header 2</h2> <h3>Subtitle 2</h3> </div> </div> </div> </div> </div>