Question

我有一个包含3张图片的HTML代码

<html>
<head>
    <title>Tias</title>

    <link rel="stylesheet" type="text/css" href="../css/estilo.css">
    <script src="../js/jquery.js"></script>
    <script src="../js/animate.js"></script>

</head>
<body>
    <div class="cuerpo">
    <h1>Tias famosas</h1>

    <img src="has.jpg" class="tias-imagen">
    <img src="dew.jpg" class="tias-imagen">
    <img src="hola.jpg" class="tias-imagen">

    </div>
</body>

然后我有一个js文件

$(document).ready(function(){

$(".tias-imagen").on('click', function() {
        $(this).animate({
            width: "70%",
            height: "800px",
            marginLeft: "0.6in",
            fontSize: "3em",
            borderWidth: "10px"
        }, 1500 );
        $(".cuerpo").not(this).animate({
            opacity: "0.4"
        }, 1500);
    });
});

然后，当我点击图像时，我希望不透明度背景的不透明度为0.4。

但我不希望不透明度适用于图像。

然而，在js代码中，它确实将不透明度放在所有元素上。

Answer 1

您正在使用类.cuerpo将不透明度应用于div。所以它会影响div中的所有孩子。而不是选择div中没有点击image的所有子项：

$(document).ready(function(){
$(".tias-imagen").on('click', function() {
        $(this).animate({
            width: "70%",
            height: "800px",
            marginLeft: "0.6in",
            fontSize: "3em",
            borderWidth: "10px"
        }, 1500 );
        $(".cuerpo").find("*").not(this).animate({
            opacity: "0.4"
        }, 1500);
    });
});

的 DEMO

Answer 2

分隔背景div和img内容。的 LIVE DEMO

HTML＆amp; CSS

<style> .container { width:300px; height:300px; position:relative; } .img, .cuerpo { width:100%; height:100%; position:absolute; top:0; left:0; } .cuerpo { z-index:-10; } </style> <div class='container'> <div class="cuerpo"> <h1>Tias famosas</h1> </div> <div class="img"> <img src="has.jpg" class="tias-imagen"> <img src="dew.jpg" class="tias-imagen"> <img src="hola.jpg" class="tias-imagen"> </div> </div>

<强>的jQuery

$(document).ready(function(){ $(".tias-imagen").on('click', function() { $(this).animate({ width: "70%", height: "800px", marginLeft: "0.6in", fontSize: "3em", borderWidth: "10px", opacity: "1", }, 1500 ); $(".cuerpo, .tias-imagen").not(this).animate({ opacity: "0.4" }, 1500); }); });

将透明度应用于除一个图像之外的所有正文

2 个答案: