Javascript 动画 CSS 不透明度，卡住了

Question

这个问题不太可能对任何 future 的访客有帮助；它只与一个较小的地理区域、一个特定的时间点或一个非常狭窄的情况相关，通常不适用于全世界的互联网受众。如需帮助使此问题更广泛适用， visit the help center 。

已关闭 10 年前。

当我将鼠标悬停在单个元素上时，我尝试使用相同的类并通过 $this 访问它来为它设置不透明度动画。

我知道我可以通过为每个项目添加不同的命名类来解决这个问题，但随着我的应用程序的增长，这将不是一个可行的解决方案，下面是我的代码，它目前将所有三个图像不透明度设置为 1。

<script>
$(document).ready(function(){
    $(".videos").hover(function(){
        var $this = $(this),
        $focus = $this.find('.video');
        $focus.stop().animate({opacity: 1.0 }, 500);
    }, function(){
        $(".video").stop().animate({opacity: 0.6 }, 500);
    });
});
</script>

这是 html :

<div class="videos">
        <div class="row-fluid">
            <div class="span12">
                <h3>LATEST VIDEOS</h3>
                <div class="row-fluid">
                    <div class="span4 video1">
                        <a href="#"><img class="video" src="images/media/vid1.jpg"/></a>
                        <p>A description of the video will go here for the user to see,
                        once a user clicks a video the player will be enlarged and the other
                        videos shall be forced underneath</p>
                    </div>
                    <div class="span4 video2">
                        <a href="#"><img class="video" src="images/media/vid2.jpg"/></a>
                        <p>A description of the video will go here for the user to see,
                        once a user clicks a video the player will be enlarged and the other
                        videos shall be forced underneath</p>
                    </div>
                    <div class="span4 video3">
                        <a href="#"><img class="video" src="images/media/vid3.jpg"/></a>
                        <p>A description of the video will go here for the user to see,
                        once a user clicks a video the player will be enlarged and the other
                        videos shall be forced underneath</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

我尝试过浏览其他网络资源，但尚未找到解决方案，我确信我在某个地方犯了一个愚蠢的错误。

任何指针将不胜感激。

Answer 1

您可能想将悬停事件绑定(bind)到 $('.video')，而不是 $('.videos') (包装器)。

<script>
$(document).ready(function(){
    $(".video").hover(function(){
        $(this).stop().animate({opacity: 1.0 }, 500);
    }, function(){
        $(this).stop().animate({opacity: 0.6 }, 500);
    });
});
</script>