What I'm hoping to achieve is when I hover over an element in the deptmts
array, the corresponding element in the brnches
array is then faded in and out. I've added below what I thought it should be but not really sure where I'm going wrong. Any help would be much appreciated.
var brnches = ["#branch01","#branch02","#branch03","#branch04"]
var deptmts = ["#depart01","#depart02","#depart03","#depart04"]
var brchhov = function() {
for(var i=0; i<deptmts.length; i++){
$(deptmts[i]).hover(
function(){$(brnches[i]).stop(true).fadeTo("fast", 1);},
function(){$(brnches[i]).stop(true).fadeTo("slow", 0);}
);
}
};
Classic closure Issue..
var brchhov = function() {
for(var i=0; i<deptmts.length; i++){
(function(num){
$(deptmts[num]).hover(
function(){$(brnches[num]).stop(true).fadeTo("fast", 1);},
function(){$(brnches[num]).stop(true).fadeTo("slow", 0);}
);
})(i);
}
};
Check Fiddle
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With