jquery mouseover의 더 좋은 방법은 무엇입니까?

Question

img 위로 마우스를 가져 가면 텍스트 색상이 아래로 변경되는 효과를 만들려고합니다. 또한 마우스 아웃하면 색상이 원래 색상으로 변경됩니다. 페이지는 다음과 같습니다

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')});})(); 

    })}; 

내가 페이지에서이 약 15 회 반복하고, 꽤 버그, 부드러운없는 것 같다 : http://vitaminjdesign.com/work.html

내 코드입니다. 잠깐 그걸 가지고 놀아 라. 이것에 대해 갈 수있는 더 좋은 방법이 있습니까?

Answer 1

hover을 사용해보십시오. 동일한 기능에서 mousein 및 mouseout 이벤트를 지정할 수 있다는 이점이 있습니다. 호버 이벤트에 적용한 내용을 적용하는 방법에 대한 도움이 필요하면 의견을 말하면 내가 할 수있는 것을 확인할 수 있습니다.

편집 :

좋아, 귀하의 사이트에 코드가 이미이

//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); 
}); 

난 당신이 원하는 일을이 코드에 두 줄을 추가하는거야있다

//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); 
}); 

그럴거야