It returns undefined for var "el" the way I have this code
$('.element').each(function(){
var el = $(this);
setTimeout(function(el) {
el.css({ marginTop: -100 });
}, 550);
$(window).resize(function(el) {
setTimeout(function(el) {
el.css({ marginTop: -100 }); //this is where el is undefined
}, 550);
})
});
Any idea what am I doing wrong?
I think it's because of el as function arguments. Try to remove them.
$('.element').each(function(){
var el = $(this);
setTimeout(function() {
el.css({ marginTop: -100 });
}, 550);
$(window).resize(function() {
setTimeout(function() {
el.css({ marginTop: -100 }); //this is where el is undefined
}, 550);
})
});
And don't forget to crucify me if I'm wrong :P
EDIT:
Just to explain what's going on, the function in resize is passed an event object, so it overwrites the el variable you have set. Event isn't a jQuery object, so you cant call css function on it.
The el parameters that you're passing into the setTimeout and the resize event are unnecessary,
working example: http://jsfiddle.net/atg7F/
You're overwriting the el. Try this:
$('.element').each(function(){
var el = $(this); // this var was overwritten...
setTimeout(function() { // here
console.log(el);
el.css({ marginTop: -100 });
}, 550);
$(window).resize(function() { // here
setTimeout(function() { // and here
el.css({ marginTop: -100 });
console.log(el);
}, 550);
})
});
