I'm trying (with very limited jQuery knowledge :) to animate a DIV when you hover over a thumbnail. I thought i could use the image ID in the REL to animate the DIV with that REL. For some reason all i end up is OBJECT OBJECT when i try to alert the div REL and it's kinda driving me nuts. Here's what i used:
$(function(){
var screenCenter = $(window).width() / 2;
var projectID = this.id;
$(document).mousemove(function(e){
if (e.pageX < screenCenter) {
}
else if (e.pageX > screenCenter) {
$("#portfolio_thumbs img").hover(function() {
//$("div[rel=" + projectID + "]").animate({left:'100px'},{queue:false,duration:300});
alert($('div[rel=" + projectID + "]'))
});
}
$('#portfolio_thumbs img').mouseout(function() {
$(".project_description").animate({left:'-440px'},{queue:false,duration:300});
});
});
What am i doing wrong?
this.id
is out of scope. You need to add it inside the hover callback:
$('#portfolio_thumbs img').hover(function() {
$('div[rel="' + this.id + '"]').animate({left:'100px'},{queue:false,duration:300});
});
Simple concept demo: http://jsfiddle.net/f8tWY/