search

jquery / download.jqueryui.com

Download Builder for jQuery UI
https://jqueryui.com/download/
Other
86 stars 72 forks source link

drop animation is broken #579

Closed BSarmady closed 2 years ago

BSarmady commented 3 years ago

jQuery: v3.6.0 jQuery UI: - v1.12.1 - 2021-06-12

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

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.

Now if you add

<div id="menu4" class="submenu hidden"></div>

after menu 3. it will stop working as expected too. same way if you remove submenu 3, sub menu 2 will work correctly.

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/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>

1.html.txt

BSarmady commented 3 years ago

I think I posted the issue in wrong repo, followed link from jqueryUI website.

BSarmady commented 3 years ago

I don't have a login on bug.jqueryui.com and I don't think I can post bugs in JqueryUI repo either, so I keep this open. please merge, move or whatever you can do.

BSarmady commented 2 years ago

This is still broken in UI 1.13.0 with jQuery 3.6.0

mgol commented 2 years ago

Looks like we already have a report at https://github.com/jquery/jquery-ui/issues/1991 so this one can be closed.