أفضل طريقة ل jquery mouseover؟

Question

أحاول إنشاء تأثير حيث تحوم فوق IMG، سوف يتغير لون النص أدناه. وأيضا، عند الماوس، سيتم تغيير اللون إلى لونه الأصلي. الصفحة هي: http://vitaminjdesign.com/work.html.

الرمز الخاص بي هو:

    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 مرة في صفحة، ويبدو أن عربات التي تجرها الدواب جدا، وليس على نحو سلس. تلعب معها لمدة دقيقة واحدة. هل هناك طريقة أفضل في هذا؟

Answer 1

جرب استخدام يحوم, ، يجري الاستفادة التي يمكنك تحديد أحداث الفأرة وماوس في نفس الوظيفة. إذا كنت بحاجة إلى أي مساعدة مع كيفية تطبيق ما لديك لحدث التحويم، فما عليك سوى التعليق وسأرى ما يمكنني القيام به.

تعديل:

حسنا، رمز على موقعك لديه بالفعل هذا

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

يجب أن تفعل ذلك