I have a button that when you hover over a sliding panel comes out underneath it from the left. If works fine…the problem is if I hover over the button then move to the adjacent panel then back to the button it repeats the animation. I want it so if the panel is already open it won’t repeat the animation.
Here is my code:
$('#flashContent').mouseenter(function() {
$('#panel').animate({'left':0,'opacity':1},300);
});
$('#panel').mouseleave(function() {
$(this).animate({'left':'-500px','opacity':0},300);
});
When it’s opened, the #flashContent button is inside/surrounded by the #panel.
Any help would be appreciated thanks.
You could check the opacity of the panel, and only if it’s less than 1 do you perform the animation.
if ($('#panel').css('opacity') < 1) {
...
}
What do I put inside that if statement to tell it not to animate?
You can surround the animate statement with an if statement, so that the animate part will only occur when the condition of the if statement is true.
Try the following…
$('#flashContent').mouseenter(function() {
var $panel = $('#panel');
if($panel.is(':hidden')) { $panel.animate({'left':0,'opacity':1},300); }
});
$('#panel').mouseleave(function() {
$(this).animate({'left':'-500px','opacity':0},300);
});
Hope this helps.
I tried this code and it’s not working.
I also need to remove the transparency because IE7 does some strange antialiasing with a black border to the text. But that’s another story.
When I try the code above it won’t animate out at all. Could this be because the div is off screen by negative positioning rather than being :hidden?
I tried to write an if statement for if it has a left value of -500px but I’m horrible at programming and can’t get it to work.
This is what I’ve got now…
$('#flashContent').mouseenter(function() {
$('#panel').animate({'left':0},300);
});
$('#panel').mouseleave(function() {
$(this).animate({'left':'-500px'},300);
});
Can you post all of the code and I will have a look, the IE7 issue is something I have comes across before, umm… ClearType bug, I think.
Here is a working example cAPS lOCK…
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<style>
div#flashcontent { background-color: #ccc;
width: 50px; }
div#panel{
background-color: #ccc;
height: 100px;
left: -500px;
top: 0;
width: 200px;
}
</style>
<title></title>
</head>
<body>
<div id="flashContent">Show</div>
<div id="panel"></div>
<script type="text/javascript">
$(document).ready(function () {
$('#flashContent').mouseenter(function () {
var $panel = $('#panel');
if ($panel.css('opacity') < 1) { $panel.animate({ 'left': 0, 'opacity': 1 }, 300); }
});
$('#panel').mouseleave(function () {
$(this).animate({ 'left': '-500px', 'opacity': 0 }, 300);
});
});
</script>
</body>
</html>
To explain, the previous :hidden attribute did not work as jQuery sees the div as not hidden as it was still consuming space on the page, my mistake. The code now just checks the opacity value, hope this helps.
Thanks for the help. The problem is now when I hover over the #flashContent button the panel slides out fine. But if I move my mouse out of the button slightly then back on it slides back again. Like it mouseleaves the #panel when it goes back to the button. This seems like a real usability problem.
Here is my current code. I may just have to rethink this whole fancy navigation or at least not have them take up the same space.
I also removed the opacity just to not deal with the IE7 problem.
$('#flashContent').mouseenter(function () {
var $panel = $('#panel');
if ($panel.css('left') == '-500px') { $panel.animate({ 'left': 0 }, 300); }
});
$('#panel').mouseleave(function () {
$('#panel').animate({ 'left': '-500px' }, 300);
});
I know what you mean, but it would be easier if I can see all of your code so I can visually see the problem…
Header with the nav
<div class="header"><!-- #BeginLibraryItem "/Library/header.lbi" -->
<a href="index.html"><img src="images/logo.png" border="0" class="png" id="logo" /></a>
<div id="nav-button">Navigate</div>
<div id="flashContent">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="226" height="31" id="nav-text" align="middle">
<param name="movie" value="swf/nav-text.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="wmode" value="transparent" />
<param name="scale" value="showall" />
<param name="menu" value="true" />
<param name="devicefont" value="false" />
<param name="salign" value="" />
<param name="allowScriptAccess" value="sameDomain" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="swf/nav-text.swf" width="226" height="31">
<param name="movie" value="swf/nav-text.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="wmode" value="transparent" />
<param name="scale" value="showall" />
<param name="menu" value="true" />
<param name="devicefont" value="false" />
<param name="salign" value="" />
<param name="allowScriptAccess" value="sameDomain" />
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflash">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
<div id="panel">
<div class="navlinks-container">
<ul class="nav">
<li><a href="about.html">about</a></li>
<li><a href="resources.html">resources</a></li>
<li><a href="incentives.html">incentives</a></li>
</ul>
<ul class="nav">
<li><a href="partners.html">partners</a></li>
<li><a href="news.html">news</a></li>
<li><a href="contact.html">contact</a></li>
</ul>
</div>
</div><!-- #EndLibraryItem --></div>
CSS for nav
#nav-button { text-indent: -9999px; background: transparent url(../images/nav-button.png) left top no-repeat; color: #fff; width: 226px; height: 31px; position: absolute; left: 0; top: 37px; cursor: pointer; z-index: 9; }
#flashContent { position: absolute; left: 0; top: 37px; cursor: pointer; z-index: 10; }
#panel { width: 500px; height: 125px; background: transparent url(../images/panel.png) left top no-repeat; position: absolute; z-index: 8; top: 0; left: -500px; }
.navlinks-container { margin: 18px 0 0 260px; }
.nav { float: left; width: 100px; }
.nav li { margin-bottom: 10px; padding-left: 10px; background: url(../images/nav-dot-green.png) left 8px no-repeat; }
.nav li a { font-size: 14px; font-weight: bold; font-family: "proxima-nova-1","proxima-nova-2", Arial, Helvetica, sans-serif; color: #fff; text-decoration: none; font-weight:700; }
.nav li a:hover { color: #2280B6; }
Having looked at all the code it looks like the #panel is sliding back when it shouldn’t be is because you have a forced height on your #panel and therefore your floated ul’s are bursting out. If you take the forced height of the #panel div then it will contain the ul’s and the mouseleave event won’t execute unless you move away from the #panel div, which contains all the floated ul’s. Hope this helps…