Getting jQuery slideUp() event to behave

**FrickenTrevor** · 10-19-2012, 12:52 AM

Hey thanks for looking at my question

I implemented a toggle on my site that slides a div up and down from visibility. The code has been rewritten to work with my menu, but now it doesn't work. Any solutions to this?

The goal is to have the background color on the div menu slide up into view upon mouse over, and slide down away from view on mouse out

Heres the code, put into a jsFiddle

**jscheuer1** · 10-19-2012, 02:02 AM

There could also be other problems. But here:

Code:

var container = $( "#menu-hover" );

There's no element in the markup with an id of 'menu-hover', so var container is an empty object. It can't slideUp or slideDown and will probably always return false for is(':visible').

I'd be interested in seeing the code when it did work. Do you have a copy of that?

Anyways, this sort of thing is much easier to diagnose if you have an actual page though. So:

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

**keyboard** · 10-19-2012, 02:06 AM

Also, correct me if I'm wrong, but you're not closing the function jQuery();

**jscheuer1** · 10-19-2012, 02:20 AM

Originally Posted by keyboard1333

Also, correct me if I'm wrong, but you're not closing the function jQuery();

Yes, that appears to also be a correct observation.

And it just occurred to me that, if something isn't visible, you cannot hover it. And that the hover function in jQuery is for pairing two functions (mouseenter and mouseleave) not for a single function with an if/else branch in it as you have. I have seen it used that way though, but results can be unexpected.

**FrickenTrevor** · 10-19-2012, 04:45 AM

Test Page.zip
I attached the original source code. Also I am not trying to work it out for a menu, not two divs. So like a CSS menu with a hover, except when you hover over the menu the background color slides up into view from the bottom, instead of just appearing there. I like the animation of the .slideToggle() method, just hate having to call two divs for it.

**jscheuer1** · 10-19-2012, 09:36 AM

Still playing with it maybe:

Code:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>
  <style type='text/css'>
#menu a {
    border-bottom: solid #4E9BDA 4px;
    padding: 10px 25px 10px 25px;
    margin: 2px;
    display: block;
    background: #465153;
    color: #8DBFE7;
    float: right;
    text-decoration: none; 
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:12px;
}
#menu a:hover {
    color: #eee;
    border-bottom: solid #000 4px;
}
  </style>
<script type='text/javascript'>//<![CDATA[ 
// When the DOM is ready, initialize the scripts.
        jQuery(function( $ ){
        	var $b = $('body');
        	$('#menu a').each(function(){
        		var $t = $(this), o = $t.offset(), $c = $('<div></div><div></div>').prependTo($b);
			$c.css({position: 'absolute', top: o.top, left: o.left, width: $t.outerWidth(), height: $t.outerHeight(), backgroundColor: $t.css('backgroundColor')})
			.eq(0).css({backgroundColor: $t.css('borderBottomColor')});
        		$t.css({position: 'relative', backgroundColor: 'transparent'}).data('hover', $c.eq(1));
		}).hover(function(){
			$(this).data('hover').animate({height: 0}, {duration: 900, queue: false});
		}, function(){
			var $t = $(this);
			$t.data('hover').animate({height: $t.outerHeight()}, {duration: 900, queue: false});
		});
});
//]]>  
</script>
</head>
<body>
  <div id="menu">
            <a href="index.html">Home</a>
            <a href="about.html">About</a>
            <a href="projects.html">Projects</a>
</div>
</body>
</html>

Questions or Comments?

Edit: OK, I did play around with it and using the jQuery UI we can animate the colors for smoother transitions for them:

Code:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  <style type='text/css'>
#menu a {
    border-bottom: solid #4E9BDA 4px;
    padding: 10px 25px 10px 25px;
    margin: 2px;
    display: block;
    background: #465153;
    color: #8DBFE7;
    float: right;
    text-decoration: none; 
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:12px;
}
#menu a:hover {
    border-bottom: solid #000000 4px;
}
  </style>
<script>
// When the DOM is ready, initialize the scripts.
jQuery(function($){
	var duration = 900, $b = $('body');
	$('#menu a').each(function(){
		var $t = $(this), o = $t.offset(), $c = $('<div></div><div></div>').prependTo($b);
		$c.css({position: 'absolute', top: o.top, left: o.left, width: $t.outerWidth(), height: $t.outerHeight(), backgroundColor: $t.css('backgroundColor')})
		.eq(0).css({backgroundColor: $t.css('color')});
		$t.css({position: 'relative', backgroundColor: 'transparent'}).data({hover: $c.eq(1), color: $t.css('color'), bbcolor: $t.css('borderBottomColor')});
	}).hover(function(){
		$(this).animate({color: '#000000'}, {duration: duration, queue: false}).data('hover').animate({height: 0}, {duration: duration, queue: false});
	}, function(){
		var $t = $(this), color = $t.data('color'), bbcolor = $t.data('bbcolor');
		$t.css({borderBottomColor: '#000000'}).animate({color: color, borderBottomColor: bbcolor}, {duration: duration, queue: false, complete: function(){
			$t.css({borderBottomColor: ''});}})
		.data('hover').animate({height: $t.outerHeight()}, {duration: duration, queue: false});
	});
});
</script>
</head>
<body>
  <div id="menu">
            <a href="index.html">Home</a>
            <a href="about.html">About</a>
            <a href="projects.html">Projects</a>
</div>
</body>
</html>

Note: IE 8 and less require UI version 8x. 9x is available but will break this in IE 8 and less.

**FrickenTrevor** · 10-19-2012, 04:53 PM

Thanks for the code, but is there any way to have only jQuery (no jQuery UI) and simplify the code? It seem pretty heavy just to have a hover transition, in my opinion.

**jscheuer1** · 10-19-2012, 05:04 PM

I don't think so, not that specific sort of transition. You could fade the text transition instead of use color animation, but that would actually be more on page code and more created elements, it would eliminate the the need for the UI but gets sloppy looking in IE 8 and less.

You can't reasonably expect to take a simple effect for a single appear disappear action and apply it to a transformation of several elements. If you wanted the menu items to simply appear and disappear when you clicked something else, like in the original demo, then yes, the code could be simple.

If there's anything you don't understand about the code, when I have more time I'd be happy to explain it.

**FrickenTrevor** · 10-19-2012, 06:52 PM

I put the new code on my page, but about every 5 page refreshes or so random blue boxes will appear then disappear on the next page load. I am inclined to put my website here, but I can show any code samples if needed

**jscheuer1** · 10-20-2012, 01:48 AM

How many people refresh a page 5 times?

Anyways, whether you're inclined or not (your post says you are, but I think you meant that you're not) to put a link to the page here. I would have to see the problem to fix it. So you can give me any code you like or perhaps PM me a link to the site. Whatever you do it has to show the problem. So don't send me any code unless you can get it to show the problem for you. Whether you do that or PM me a link to the page, I would still need to know the browser and OS used to see the problem, as well as step by step what I must do to duplicate the problem.

I've tried out my demo in IE 9 (in IE 9, 8, and 7 modes), a real IE 8 and 6, Chrome, Firefox, and Opera, refreshing many times in each with no problems. These are all under Win 7 except for the real IE 8 and 6, which were under XP. If it's not one of those giving you the problem, I might not be able to test it. But I'll see what I can arrange.

I did however update it a few times. Make sure you're using the latest:

Code:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  <style type='text/css'>
#menu a {
    border-bottom: solid #4E9BDA 4px;
    padding: 10px 25px 10px 25px;
    margin: 2px;
    display: block;
    background: #465153;
    color: #8DBFE7;
    float: right;
    text-decoration: none; 
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:12px;
}
#menu a:hover {
    border-bottom: solid #000000 4px;
}
  </style>
<script>
// When the DOM is ready, initialize the scripts.
jQuery(function($){
	var duration = 900, $b = $('body');
	$('#menu a').each(function(){
		var $t = $(this), o = $t.offset(), $c = $('<div></div><div></div>').prependTo($b);
		$c.css({position: 'absolute', top: o.top, left: o.left, width: $t.outerWidth(), height: $t.outerHeight(), backgroundColor: $t.css('backgroundColor')})
		.eq(0).css({backgroundColor: $t.css('color')});
		$t.css({position: 'relative', backgroundColor: 'transparent'}).data({hover: $c.eq(1), color: $t.css('color'), bbcolor: $t.css('borderBottomColor')});
	}).hover(function(){
		$(this).animate({color: '#000000'}, {duration: duration, queue: false}).data('hover').animate({height: 0}, {duration: duration, queue: false});
	}, function(){
		var $t = $(this), color = $t.data('color'), bbcolor = $t.data('bbcolor');
		$t.css({borderBottomColor: '#000000'}).animate({color: color, borderBottomColor: bbcolor}, {duration: duration, queue: false, complete: function(){
			$t.css({borderBottomColor: ''});}})
		.data('hover').animate({height: $t.outerHeight()}, {duration: duration, queue: false});
	});
});
</script>
</head>
<body>
  <div id="menu">
            <a href="index.html">Home</a>
            <a href="about.html">About</a>
            <a href="projects.html">Projects</a>
</div>
</body>
</html>

Oh and, things might be able to be simplified a bit. But the code really is pretty simple now. All it does is create two new divs for each menu item positioning them absolutely behind the item. The one in the mid ground is the background color that the menu item had, while the item itself has its background changed to transparent. The one in the full background is the color you want transitioned to. It is revealed when the mid ground one is retracted on hover of the item. At the same time the foreground color is animated to keep pace. The border bottom color is coordinated in this as well. Everything is taken from the existing markup and styles except for the new foreground color (#000000), which is also used for the border bottom color on hover. It looks a little more complicated than just that because to get it to react smoothly and to behave well if someone only partially hovers and then moves the mouse elsewhere, the order and queuing of the animations is a little tricky.