larskfischer Posted May 14, 2015 Share Posted May 14, 2015 I am working on this website: http://www.heartbeatgroup.dk/Aletta/Index.html I have made a jquery script in the second picture in menu but it is not behaving quite the way I intended: When I do a mouseover from below, the picture in the menu jumps up and down instead of disappearing. And when I do a mouseover from the top, the whole page makes a little jump, on mouseleave I am a total newbie and help to avoid this would be greatly appreciated. Greetings from Lars Denmark Link to comment Share on other sites More sharing options...
justsomeguy Posted May 14, 2015 Share Posted May 14, 2015 You should probably chain the functions. Have the image fade out first, and once it's finished then show the other element. Link to comment Share on other sites More sharing options...
larskfischer Posted May 18, 2015 Author Share Posted May 18, 2015 Hi justsomeguy Thank you for your suggestion. I have had a look at chaining the functions and it works better. The only problem I have now is, that when I quickly swipes the mouse across the menuheader ("Behandlingsformer"), the sub-menu appears but the picture does not hide. Can you tell me, what the problem is? Greetings from Lars Link to comment Share on other sites More sharing options...
dsonesuk Posted May 18, 2015 Share Posted May 18, 2015 Because it get stuck between fadeIn/Out, hide, show use .stop(true, true) to force it to stop all multiple animations queued for this element, BUT then completely finish the current running animation. $("#menupunkt2 img").stop(true, true)... rest of jquery Link to comment Share on other sites More sharing options...
larskfischer Posted May 18, 2015 Author Share Posted May 18, 2015 Hi dsonesuk Thank you for your reply. I couldn´t get it to work:-( I played around with the .stop(true,true) command, but it never solved the problem. Could you write a bit more about it, please. Link to comment Share on other sites More sharing options...
dsonesuk Posted May 18, 2015 Share Posted May 18, 2015 http://www.w3schools.com/jquery/jquery_stop.asp Link to comment Share on other sites More sharing options...
larskfischer Posted May 19, 2015 Author Share Posted May 19, 2015 I have read the page about the stop method. But it does not solve my problem. When I quickly swipe the mouse pointer across "Behandlingsformer" The image disappears and the sub-menu appears on mouseover And the image reappears on mouseleave, but the sub-menu does not go away... I am sorry for being so thick headed, but I cannot get it to work:-( Link to comment Share on other sites More sharing options...
dsonesuk Posted May 20, 2015 Share Posted May 20, 2015 Because the chained functions relies on current state of the main event function animation, try $(document).ready(function() { $("#menu2tekst").mouseenter(function() { $("#menupunkt2 img").stop(true, true).hide(50, function() { $("#undermenu").stop(true, false).show(600); }); }); }); $(document).ready(function() { $("#menu2tekst").mouseleave(function() { $("#undermenu").stop(true, true).hide(50, function() { $("#menupunkt2 img").stop(true, false).show(600); }); }); }); Link to comment Share on other sites More sharing options...
larskfischer Posted May 20, 2015 Author Share Posted May 20, 2015 Thank you dsonesuk, it worked. I am very grateful for your help. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now