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)

另外，请注意两个函数的使用：和mousesenter现在被认为已弃用，并且应该避免与高于 1.8 的 jQuery 版本兼容。mouseleavehover

于 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 回答