Question

由于我是jQuery的新手，我发现这个脚本对我的项目非常有用。我想淡化容器内的图像。

<script type="text/javascript">
    $(document).ready(function(){
        $("#collage-container img").mouseover(function(){
            $("#collage-container img").css("z-index",1);
            $(this).css("z-index",999);
        $(this).fadeOut(100,function(){ $(this).fadeIn(1000);  });
         });
    });
</script>

很难理解第4行和第5行。第5行是图像吗？

Answer 1

回调函数中的$(this)为$("#collage-container img")，您可以像下面一样重写代码。顺便说一句，line4没有意义，它将z-index设置为1，但是第5行将z-index设置为999。

   $(document).ready(function () {
       $("#collage-container img").mouseover(function () {
           $(this).css("z-index", 999).fadeOut(100, function () {
               $(this).fadeIn(1000);
           });
       });
   });

Answer 2

第4行设置z-index属性，该属性与图层有关。具有较高z-index的层将流过具有较低z-index的层。 z-index 1是一个低值，因此我猜测图像被推到后面。但我也认为第5行的this引用了相同的元素，所以它立即被赋予了999的z-index（这是非常高的）。

这似乎有点不敏感，但也许它是某种bug的解决方法？

Answer 3

第4行：将匹配图像#collage-container img的z-index设置为1 第5行：此在这种情况下指的是#collage-container img;将z-index设置为999。

这些行是mouseover函数的一部分。

Answer 4

首先看一下第3行，它说：“当鼠标悬停在拼贴画中的图像上时，将执行该功能。”

第4,5,6行位于函数内部，函数内的 this 指向触发函数的元素（在本例中为图像）。第5行说，将z-index设置为999，将图像置于前面。

我无法理解以下脚本

4 个答案: