0

マウスオーバーするとdivが表示され、画像上でアニメーション化される1つの画像に対してマウスオーバーイベントを実行しようとしています。ただし、マウスオーバーを行うと、一度に1つだけが必要な場合に、別々の画像の両方のdivが表示されます。これが私のコードです。最初の部分はマウスオーバーです。2 つ目はマウスアウトです。

$('.portfolio img').mouseover(function(){
    $(this).css('cursor', 'pointer');
    $(this).parent().find('img:first').stop().animate({opacity:1}, 800, function() {
          $("div.folio").animate({ height: '+=25px', top: '-=24px' }, 100, function() {
                $("div.folio span").animate({ opacity: 1 }, 500);
          });
    });
});

$('.img_grayscale').mouseout(function(){
       $(this).stop().animate({opacity:0}, 800, function() {
            $("div.folio span").animate({ opacity: 0 }, 500, function() {
                $("div.folio").animate({ height: '-=25px', top: '+=24px' }, 100);
                $("div.folio").css('top', '-9px');
            });
        });
}); 

        <div class="portfolio">
            <h2>The Portfolio</h2>
            <p class="slideTwo">Check out some of our recent projects.</p>
            <ul>
                <li><img src="portfolioOne.jpg"></img><div class="folio"><span>thesite.com</span></div></li>
                <li><img src="portfolioOne.jpg"></img><div class="folio"><span>mysite.com</span></div></li>
            </ul>
        </div>
4

4 に答える 4

1

jQuery を使用$("div.folio")すると、「フォリオ」のクラスを持つすべての div が返されます。マウスオーバーした画像だけでなく、両方の画像でこのアニメーションが表示されているため、アニメーション化する div で両方のクラスが同じであると想定しています。1 つだけをアニメーション化するには、jQuery で選択するときに、より具体的にする必要があります。アニメーション化する div へのパスに $(this) を含めると、通常は機能しますが、対応する HTML がないと正確なコードはわかりません。

于 2012-04-19T18:26:15.390 に答える
0

これを理解することができました。基本的に、次のコードを使用して DOM を横断する必要がありました。画像を参照してから、親に移動し、次に div.folio の div である DOM の次の要素に移動しました。次に、そのオブジェクトの子オブジェクトをフェード インさせました。同じことを、基本的にマウスアウトで逆に行いました。

            $('.portfolio img').mouseover(function(){
                $(this).css('cursor', 'pointer');
                $(this).parent().find('img:first').stop().animate({opacity:1}, 800, function() {
                    $(this).parent().next().animate({ height: '+=25px' }, 100, function() {
                        $(this).children().animate({ opacity: 1 }, 100);
                    });
                });
            });

            $('.img_grayscale').mouseout(function(){
                $(this).stop().animate({opacity:0}, 800, function() {
                        $(this).parent().next().children().animate({ opacity: 0 }, 100, function() {
                            $(this).parent().animate({height: '-=25px' }, 100);
                    });
                });
            });
于 2012-04-20T13:53:13.537 に答える
0

あなたが示していない他の何が起こっているかによって、問題になるかもしれないし、問題にならないかもしれません。

  • 関心のあるをすでに表しているはず$(this).parent().find('img:first')の jQuery onmouseover 関数内で実行しています。何らかの理由でそれが必要であることがわかりましたか？$(this)img
  • セレクターでより具体的にすることができます。やってみる$(".portfolio>ul>li>img")
  • img_grayscale質問のマークアップで一度しか言及されていないため、そのクラスがどのように適用されるかはわかりませんが、適用されると想定しています。
  • クラスportfolio(またはいくつかの一意の識別子) を画像に直接追加するだけで、期待どおりに機能しない理由を正確に理解するのがおそらく簡単になります。次に、マウスオーバーセレクターは次のようになります$(".specialClass")

jsfiddle.net を投稿してみてください。テスト用に Web から任意の 2 つの画像を借りることができます。

于 2012-04-19T19:39:19.683 に答える
0

イベント ハンドラから "false" を返して、バブル アップ イベントをキャンセルする必要があります。

$('.portfolio img').mouseover(function(){
    // Your logic here...
    return false;
});
于 2012-04-19T18:18:18.140 に答える