jQuery UI Widgets › Forums › Navigation › Expander › Interrupt expanding/collapsing animation
Tagged: collapse, expand, expanded, expander, jqxExpander, mouseenter, mouseleave
This topic contains 2 replies, has 2 voices, and was last updated by parascus 11 years, 3 months ago.
-
Author
-
Hi jqWidgets-Team,
I want to use the expander but it should expand on mouseenter and collapse on mouseleave. This is as I see no problem and can be done by: $(‘jqxExpander’).mouseenter() and .mouseleave(). But haveing several expander of this type to to another gliding with the mouse over the widgets seems to lead to a missbehaviour. The current expander under the mouse pointer is expanded correct but sometimes it does not react on the mouseleave event. I think this is because the animation is ongoing while the mouseleave event is fired. Is there any way to interrupt the animation and trigger the collapsing? Or how can I build a queue so after expanding fully the expander which the mouse has already left collapse again?
Thanks in advance
Stephan
Example:
<body><link rel="stylesheet" type="text/css" href="./thirdparty/jqwidgets/styles/jqx.base.css"></link><link rel="stylesheet" type="text/css" href="./thirdparty/jqwidgets/styles/jqx.metrodark.css"></link><style> .top_menu { float:left; display:inline-block; } .clickable { cursor:pointer !important; }</style><script type="text/javascript" src="./thirdparty/jquery/jquery-1.10.1.min.js"></script><script type="text/javascript" src="./thirdparty/jqwidgets/jqxcore.js"></script><script type="text/javascript" src="./thirdparty/jqwidgets/jqxexpander.js"></script><div id="top_menu_" class="top_menu"> <div>Alpha</div> <div> <div id="menu_A1" data-href="a1.htm" class="clickable menu_item">A1</div> <div id="menu_A2" data-href="a2.htm" class="clickable menu_item">A2</div> <div id="menu_A3" data-href="a3.htm" class="clickable menu_item">A3</div> <div id="menu_A4" data-href="a4.htm" class="clickable menu_item">A4</div> </div></div><div id="top_menu_" class="top_menu"> <div>Beta</div> <div> <div id="menu_B1" data-href="b1.htm" class="clickable menu_item">B1</div> <div id="menu_B2" data-href="b2.htm" class="clickable menu_item">B2</div> </div></div><div id="top_menu_" class="top_menu"> <div>Gamme</div> <div> <div id="menu_C1" data-href="c1.htm" class="clickable menu_item">C1</div> <div id="menu_C2" data-href="c2.htm" class="clickable menu_item">C2</div> <div id="menu_C3" data-href="c3.htm" class="clickable menu_item">C3</div> </div></div><script>$(".top_menu").jqxExpander({ width: "200px", theme: "metrodark", expanded: false, showArrow: false, expandAnimationDuration: 50, collapseAnimationDuration: 50 });$(".top_menu").mouseenter( function() { $(".top_menu").jqxExpander({expanded: false }); $(this).jqxExpander("expand")});$(".top_menu").mouseleave( function() { $(this).jqxExpander("collapse")});$(".menu_item").click( function() { alert( $(this).attr("data-href"));});</script></body>
Hello Stephan,
Here is how to achieve this functionality:
<!DOCTYPE html><html lang="en"><head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/gettheme.js"></script> <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxexpander.js"></script> <script type="text/javascript"> $(document).ready(function () { // Create jqxExpander var theme = ""; $("#jqxExpander").jqxExpander({ width: '350px', theme: theme }); var left = false; $("#jqxExpander").mouseenter(function () { left = false; $('#jqxExpander').jqxExpander('expand'); }); $("#jqxExpander").mouseleave(function () { left = true; $('#jqxExpander').jqxExpander('collapse'); }); $('#jqxExpander').on('expanded', function () { if (left == true) { $('#jqxExpander').jqxExpander('collapse'); }; }); }); </script></head><body class='default'> <div id='jqxWidget' style="float: left;"> <div id='jqxExpander'> <div> Early History of the Internet</div> <div> <ul> <li>1961 First packet-switching papers</li> <li>1966 Merit Network founded</li> <li>1966 ARPANET planning starts</li> <li>1969 ARPANET carries its first packets</li> <li>1970 Mark I network at NPL (UK)</li> <li>1970 Network Information Center (NIC)</li> <li>1971 Merit Network's packet-switched network operational</li> <li>1971 Tymnet packet-switched network</li> <li>1972 Internet Assigned Numbers Authority (IANA) established</li> <li>1973 CYCLADES network demonstrated</li> <li>1974 Telenet packet-switched network</li> <li>1976 X.25 protocol approved</li> <li>1979 Internet Activities Board (IAB)</li> <li>1980 USENET news using UUCP</li> <li>1980 Ethernet standard introduced</li> <li>1981 BITNET established</li> </ul> </div> </div> </div></body></html>
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi Dimitar,
that works great. Thank you!
Kind regards
Stephan
-
AuthorPosts
You must be logged in to reply to this topic.