3

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

    })};

これを 1 ページで約 15 回繰り返しましたが、かなりバグが多く、スムーズではないようです。ちょっと遊んでみてください。これについてもっと良い方法はありますか？

4

1 に答える 1

2

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

このコードに、必要なことを行う 2 行を追加します。

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

それはそれを行う必要があります

于 2009-12-03T16:31:55.920 に答える