Question

我有很少的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");

  }

);

});

Answer 1

问题在于你指的是具有合适类的所有元素，而不仅仅是将鼠标悬停在它上面的元素的子元素。使用

查看此问题的简化jsfiddle

$(this)

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

Answer 2

如果你这样称呼它，你就是动画所有列表项：

$(".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");
    }
);});

分别为每个选择器设置动画

2 个答案: