problem with binding mouse enter mouse leave in complex fold out menu

problem with binding mouse enter mouse leave in complex fold out menu

Hi all,

I have some problem integrating a mouse enter/leave (alter. hover) event in this function:

function appendTitles() {
var titles = gtitles; 
$.each(titles, function(index,title){
$("<img id = 'title_"+title+"' class='titles' src='images/title_"+title+".png'></img>")
.appendTo('#folder')
.bind('click', function() {
    var work = $("#gwork").val();
$(".work_" + work).fadeOut(950, 'easeOutSine', function() {
    $(".work_"+ title).fadeIn(950, 'easeInSine');
        });
$("#gwork").val(title);
});
});
$('.titles').bind({
mouseenter: function(e) {
  // Hover event handler
    $(this).animate({'width': '135px','height': '19px'}, 150, 'easeOutBack'); 
  },
  mouseleave: function(e) {
  // Hover event handler
    $(this).animate({'width': '131px','height': '17px'}, 150, 'easeOutBack');
  }
})
}

Neither works it this way:

function appendTitles() {
var titles = gtitles; 
$.each(titles, function(index,title){
$("<img id = 'title_"+title+"' class='titles' src='images/title_"+title+".png'></img>")
.appendTo('#folder')
.stop(true, true)
.bind({
mouseenter: function(e) {
  // Hover event handler
    $(this).animate({'width': '135px','height': '19px'}, 150, 'easeOutBack');
  },
  mouseleave: function(e) {
  // Hover event handler
    $(this).animate({'width': '131px','height': '17px'}, 150, 'easeOutBack');
  },
  click: function(e) {
  // Click event handler
    var work = $("#gwork").val();
$(".work_" + work).fadeOut(950, 'easeOutSine', function() {
    $(".work_"+ title).fadeIn(950, 'easeInSine');
  });
$("#gwork").val(title);
}
  });
})
}

I admit it is quite complex, yet, I do not quite understand why it is able to bind and keeo the click function on each title but not the hover events. (they seem to be fired only once and not properly)

Maybe it helps to see the current result to understand what I want under:


Here it should be the fold out menu on the bottom left of the page.
When the mouse goes over the appearing titles (after they completely folded out) the should hint at the click event by enlarging a little the titles („Gucci“, „Bulgari“ etc.)

Thank you for any ideas!
I am stuck here completely :-(

Garavani