Question

我试图通过使用相同的类并通过$ 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

您可能打算将悬停事件绑定到$('.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>

Javascript动画CSS不透明，卡住了

1 个答案: