0

画像がある DIV はほとんどありません。これらの画像の背後には、アニメーション化されるラベルがあります。

問題は、それぞれを個別にアニメーション化するのではなく、アニメーション効果がそれらすべてに対して行われることです。ここにコードがあります。

HTML

<div class="MainGallery">                   
        <div class="MainGalleryData" id="MainGalleryData">
            <ul>
                <li>   
                    <img  src="img/pic1a.png" alt="" /> 
                    <label class="MainGalleryDataSite">     
                       <a href="Contact.aspx" target="_top">    </a>    
                    </label>    
                </li>
            </ul>
        </div>

     <div class="MainGalleryData" id="MainGalleryData2">
            <ul>
                <li>   
                    <img  src="img/pic1a.png" alt="" /> 
                    <label class="MainGalleryDataSite">     
                       <a href="Contact.aspx" target="_top">    </a>    
                    </label>    
                </li>
            </ul>
      </div>

JS

$(document).ready(function () {

  $(".MainGallery li").hover(function () {

    $(".MainGallery li .MainGalleryDataSite").animate({ "top": "-178px" }, "fast");

   },function () {

    $(".MainGallery li .MainGalleryDataSite").animate({ "top": "-148px" }, "fast");

  }

);

});
4

2 に答える 2

3

問題は、マウスが上にある要素の子だけではなく、適切なクラスを持つすべての要素を参照することです。を使用して、問題のこの単純化されたjsfiddleを見てください。

$(this)

また、2 つの関数の使用法に注意してください: mousesenterandは現在非推奨と見なされており、1.8 以降のバージョンの jQuery との互換性のために避ける必要がありますmouseleave。hover

于 2013-03-01T16:17:41.643 に答える
1

次のように呼び出すと、すべてのリスト項目がアニメーション化されます。

$(".MainGallery li .MainGalleryDataSite").animate({ "top": "-148px" }, "fast");

JavaScript を次のように変更します。

$(document).ready(function () {
    $(".MainGallery li").hover(function () {
        $("this").find(".MainGalleryDataSite").animate({ "top": "-178px" }, "fast");
    },function () {
        $("this").find(".MainGalleryDataSite").animate({ "top": "-148px" }, "fast");
    }
);});
于 2013-03-01T15:59:17.757 に答える