JQuery array question
I'm new to jQuery and I'm trying to make a cool little menu effect, when the user hovers over an element (#nav li), it will animate a large width, which will show the full background image.Each of the menu items has an ID to set the width explicitly (since they are all different in size), so # nav1 can be 80px while # nav2 can be 90px. So I found this: How to get all IDs using jQuery? and it helped me create an array, but now I am having trouble figuring out how to insert it into the animation. I decided that I would need to do every loop or loop. But as I said, I am pretty new to jQuery and I am in trouble.
So basically I would like the chgWidth variable to return the width () of the current hover #nav, and then I would wire that variable to the animit, except that I would add 30px for example, or when hovering I would subtract 30px ...
Any idea? Here is my current code ...
$(function(){
var chgWidth = $("#nav [id]").map(function(id) {
return this.id;
});
$.each(chgWidth,function(n,value){
$('#nav li').hover(function() {
$(this).stop(0,1).animate({"width" : chgWidth+"px" });
},
function(){
$(this).stop(0,1).animate({ "width" : chgWidth+"px" });
});
});
Example HTML
<div id="menu">
<ul id="nav">
<li id="nav1"><a alt="" href="#">home</a></li>
<li id="nav2"><a alt="" href="#">about us</a></li>
<li id="nav3"><a alt="" href="#">weddings & events</a></li>
<li id="nav4"><a alt="" href="#">gallery</a></li>
<li id="nav5"><a alt="" href="#">accolades</a></li>
<li id="nav6"><a alt="" href="#">blog</a></li>
<li id="nav7"><a alt="" href="#">contact us</a></li>
</ul>
</div>
Example CSS:
#menu { width: 100%; overflow: hidden; padding:0px 0px; background: #ffc4a0;}
#nav { position: relative; left: 50%; float: left;}
#nav li { position: relative; right: 50%; float: left; padding: 0 5px; margin: 0 5px; overflow:hidden; }
#nav1 { width:55px; }
#nav2 { width:80px; }
#nav3 { width:175px; }
#nav4 { width:60px; }
#nav5 { width:85px; }
#nav6 { width:40px; }
#nav7 { width:100px; }
#nav li a { color: #ffffff; text-decoration: none; font: bold 16px Verdana, Arial, Helvetica, sans-serif; }
Based on the answer I got, this is what I ended up with and it seems to work well (thanks to Joel and Krdluzni):
$(function(){
$("#nav [id]").each(function(){
$(this).hover(function() {
$(this).stop(0,1).animate({"width" : "+=30" });
},
function(){
$(this).stop(0,1).animate({ "width" : "-=30" });
});
});
});
source to share
You don't really need to get the ids in the array as much as you need to assign an animation to every nav item that has an ID.
Instead of mapping IDs to the chgWidth variable, use them to iterate over a set of items and each item separately.
$(function(){
$("#nav [id]").each(function(){
$(this).hover(function() {
$(this).stop(0,1).animate({"width" : this.id+"px" });
},
function(){
$(this).stop(0,1).animate({ "width" : this.id+"px" });
});
});
});
When you use each
to iterate over a set of elements, the context is this
set to the current element of the iteration.
source to share
jQuery has for a short time adopted the + = syntax for both width and other numeric values in animation. See the second paragraph in the overview (and examples) here: http://docs.jquery.com/Effects/animate#paramsdurationeasingcallback
source to share
No function required! If the selector returns multiple elements, all elements get a function chained to them.
This is almost correct:
$("li #nav").hover(
function()
{
$(this).stop(0,1).animate({"width" : this.width()+30 });
//save original width somehow
},
function()
{
$(this).stop(0,1).animate({ "width" : this.width()-30 });
//retrieve original width
});
);
You just need to keep the width somehow. Perhaps they can be read from CSS.
source to share