mejor manera de pasar el ratón jQuery?

Question

Estoy tratando de crear un efecto en el que si se pasa sobre un img, el color de texto cambiará por debajo de ella. Y también, cuando mouseOut, el color cambiará de nuevo a su color original. La página es: http://vitaminjdesign.com/work.html

Mi código es:

    if(window.jQuery){jQuery(function(){

        (function(){ jQuery('div#one img').bind('mouseover', function(event, ui){var target = jQuery('div#one h2'); target.animate({'color':'#111111'},250,'linear')});})();

    })};

Repetí este alrededor de 15 veces en una página, y parece ser bastante con errores, y no es suave. ReproducirT rato con él durante un minuto. ¿Hay una mejor manera de ir sobre esto?

Answer 1

Trate de usar vuelo estacionario , la ventaja es que se pueden especificar los eventos mousein y en mouseout la misma función. Si necesita ayuda con específicamente cómo aplicar lo que tienes al evento vuelo estacionario, simplemente comentar y veré lo que puedo hacer.

EDIT:

Ok, el código en su sitio ya cuenta con este

//On mouse over those thumbnail
$('.zitem').hover(function() {

    //Set the width and height according to the zoom percentage
    width = $('.zitem').width() * zoom;
    height = $('.zitem').height() * zoom;

    //Move and zoom the image
    $(this).find('a img').stop(false,true).animate({'width':width, 'height':height, 'top':move, 'left':move}, {duration:200});

    //Display the caption
    $(this).find('div.caption').stop(false,true).fadeIn(200);
},
function() {
    //Reset the image
    $(this).find('a img').stop(false,true).animate({'width':$('.zitem').width(), 'height':$('.zitem').height(), 'top':'0', 'left':'0'}, {duration:100});    

    //Hide the caption
    $(this).find('div.caption').stop(false,true).fadeOut(200);
});

Voy a añadir dos líneas en el código que hace lo que quiere

//On mouse over those thumbnail
$('.zitem').hover(function() {

    //Set the width and height according to the zoom percentage
    width = $('.zitem').width() * zoom;
    height = $('.zitem').height() * zoom;

    //Move and zoom the image
    $(this).find('a img').stop(false,true).animate({'width':width, 'height':height, 'top':move, 'left':move}, {duration:200});

    //Change the header colour
    $(this).siblings('h2').animate({'color':'#111111'},250,'linear');

    //Display the caption
    $(this).find('div.caption').stop(false,true).fadeIn(200);
},
function() {
    //Reset the image
    $(this).find('a img').stop(false,true).animate({'width':$('.zitem').width(), 'height':$('.zitem').height(), 'top':'0', 'left':'0'}, {duration:100});    

    //Change the header colour back
    $(this).siblings('h2').animate({'color':'#EE4E07'},250,'linear');

    //Hide the caption
    $(this).find('div.caption').stop(false,true).fadeOut(200);
});

Esto debe hacerlo