Description
jQuery: v3.6.0
jQuery UI: - v1.12.1 (with 3.6.0) - 2021-06-12
jQuery UI: - v1.13.0 (with 3.6.0) - 2021-06-12 (still broken)
Drop animation is broken, I'm not sure about other animations since I haven't tried.
Basically, after completing the animation hide-drop animation, the element is showing again. however this is happening in some specific case. This animation works correctly in jQuery UI - v1.11.4 - 2021-06-28
I tried using jQuery 3.6.0 but unfortunately lots of other UI elements, animation and components are broken too so I had to downgrade back to jQuery 1.11.3 to get website working again.
Issue
Clicking on menu1~3 will hide title and then show submenu1~3.
After mouse leave the menu, animation will trigger (a 1 second timer) and hide submenu1~3 and show title again.
This doesn't work on menu1 and 2 but works on menu3. after completing hide-drop animation, sub menu 1 and 2 show again over title which is also visible.
Additional Info
Now if you add
<div id="menu4" class="submenu hidden"></div>
after menu 3, menu 3 will show same symptoms too but not menu4. Same way if you remove submenu 3, sub menu 2 will work correctly (last menu item is the only one working as expected).
This works correctly on 1.11.4 but something else is broken in 1.11.4 and that was my reason to upgrade to 1.12.1
Following is the test code that I am using (attached as file too)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!--script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script-->
<!--script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script-->
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript">
var MenuTimer;
$(function () {
$('.button').button();
$('.menu a').hover(
function () {
clearTimeout(MenuTimer);
},
function () {
MenuTimer = setTimeout(function () {
$('.submenu').hide('drop', { direction: 'up' });
$('.title').show('drop', { direction: 'right' });
$('.menu a').blur();
}, 1000);
}
)
$('.menu').on('click', 'a', function () {
$('.submenu').hide();
$('.title').hide('drop', { direction: 'right' });
$('#' + $(this).attr('data-id')).show('drop', { direction: 'up' });
if ($(this).attr('href') == '#')
return false;
});
});
</script>
<style type="text/css">
.hidden { display: none; }
.title { position: absolute; top: 0px; left: 0px;background-color:red }
.submenu { position: absolute; top: 0px; left: 0px;background-color:green }
.menu { flex-grow: 2; display: flex; flex-direction: column; }
.header { height: 126px; }
</style>
</head>
<body>
<div class="header">
<div class="m-1 menu">
<div class="mainmenu">
<a href="#" class="button" data-id="menu1">menu1</a>
<a href="#" class="button" data-id="menu2">menu2</a>
<a href="#" class="button" data-id="menu3">menu3</a>
</div>
<div style="flex-grow:2; position:relative;">
<div class="title">TITLE TITLE TITLE TITLE TITLE</div>
<div id="menu1" class="submenu hidden">
<a href="#" class="button">Sub Menu 1</a>
</div>
<div id="menu2" class="submenu hidden">
<a href="#" class="button">Sub Menu 2</a>
</div>
<div id="menu3" class="submenu hidden">
<a href="#" class="button">Sub Menu 3</a>
</div>
</div>
</div>
</div>
</body>
</html>