图像不透明度不起作用[重复]答案

【问题标题】：image opacity not working [duplicate]图像不透明度不起作用[重复]
【发布时间】：2018-08-24 06:57:14
【问题描述】：

我正在尝试在图像上添加不透明效果。它仅适用于第一张图像。这种不透明效果不适用于下一张图像。我也添加了 jquery 脚本，但它不起作用。非常感谢

$(document).ready(function() {
    $("#imgDemo").css("opacity", 0.5);
    $("#imgDemo").hover(function() {
        $(this).animate({opacity: 1.0}, 500);
    }, function() {
        $(this).animate({opacity: 0.5}, 500);
    });
});

body
{
    padding: 10px;
   
}
span
{
    font-family : Arial;
    font-size : 14pt;
    color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container">
<div class="row">	
	<div class="col-md-4">
  <h2>Circle</h2>
  <p>The .rounded-circle class shapes the image to a circle:</p>            
  <img src="http://3.bp.blogspot.com/-4p6k8mM7V7c/T6jolM6I_4I/AAAAAAAACL4/lTZyaeJyObM/s400/Change_Image_Opacity_Using_jQuery.jpg""  alt="Cinque Terre" width="304" height="236" id="imgDemo"> 
</div>
<div class="col-md-4">
  <h2>Circle</h2>
  <p>The .rounded-circle class shapes the image to a circle:</p>            
  <img src="http://3.bp.blogspot.com/-4p6k8mM7V7c/T6jolM6I_4I/AAAAAAAACL4/lTZyaeJyObM/s400/Change_Image_Opacity_Using_jQuery.jpg""  alt="Cinque Terre" width="304" height="236" id="imgDemo"> 
</div>
<div class="col-md-4">
  <h2>Circle</h2>
  <p>The .rounded-circle class shapes the image to a circle:</p>            
  <img src="http://3.bp.blogspot.com/-4p6k8mM7V7c/T6jolM6I_4I/AAAAAAAACL4/lTZyaeJyObM/s400/Change_Image_Opacity_Using_jQuery.jpg""  alt="Cinque Terre" width="304" height="236" id="imgDemo"> 
</div>
</div>
</div>
</body>

【问题讨论】：

您的 id 应该是唯一的

标签： javascript jquery html css

【解决方案1】：

您的 ID 必须是唯一的。或者，您可以使用类，将id 替换为class，将#imgDemo 替换为.imgDemo，如下所示：

$(document).ready(function() {
    $(".imgDemo").css("opacity", 0.5);
    $(".imgDemo").hover(function() {
        $(this).animate({opacity: 1.0}, 500);
    }, function() {
        $(this).animate({opacity: 0.5}, 500);
    });
});

body
{
    padding: 10px;
   
}
span
{
    font-family : Arial;
    font-size : 14pt;
    color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<div class="container">
<div class="row">	
	<div class="col-md-4">
  <h2>Circle</h2>
  <p>The .rounded-circle class shapes the image to a circle:</p>            
  <img src="http://3.bp.blogspot.com/-4p6k8mM7V7c/T6jolM6I_4I/AAAAAAAACL4/lTZyaeJyObM/s400/Change_Image_Opacity_Using_jQuery.jpg""  alt="Cinque Terre" width="304" height="236" class="imgDemo"> 
</div>
<div class="col-md-4">
  <h2>Circle</h2>
  <p>The .rounded-circle class shapes the image to a circle:</p>            
  <img src="http://3.bp.blogspot.com/-4p6k8mM7V7c/T6jolM6I_4I/AAAAAAAACL4/lTZyaeJyObM/s400/Change_Image_Opacity_Using_jQuery.jpg""  alt="Cinque Terre" width="304" height="236" class="imgDemo"> 
</div>
<div class="col-md-4">
  <h2>Circle</h2>
  <p>The .rounded-circle class shapes the image to a circle:</p>            
  <img src="http://3.bp.blogspot.com/-4p6k8mM7V7c/T6jolM6I_4I/AAAAAAAACL4/lTZyaeJyObM/s400/Change_Image_Opacity_Using_jQuery.jpg""  alt="Cinque Terre" width="304" height="236" class="imgDemo"> 
</div>
</div>
</div>
</body>

【讨论】：

它的工作。非常感谢

【解决方案2】：

您的 JS 代码的问题是，您使用相同的 id 属性重复多次，而它们必须在 DOM 中是唯一的。

然而你根本不需要为此使用 JS。在这种情况下使用 CSS 更适用，并且比 JS 动画效果更好。为此，请使用 :hover 选择器和 transition 规则。试试这个：

span {
  font: 14pt Arial;
  color: green;
}

.imgDemo {
  opacity: 0.5;
  transition: opacity 0.5s;
}

.imgDemo:hover {
  opacity: 1;
}

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <h2>Circle</h2>
      <p>The .rounded-circle class shapes the image to a circle:</p>
      <img src="http://3.bp.blogspot.com/-4p6k8mM7V7c/T6jolM6I_4I/AAAAAAAACL4/lTZyaeJyObM/s400/Change_Image_Opacity_Using_jQuery.jpg" alt="Cinque Terre" width="304" height="236" class="imgDemo">
    </div>
    <div class="col-md-4 ">
      <h2>Circle</h2>
      <p>The .rounded-circle class shapes the image to a circle:</p>
      <img src="http://3.bp.blogspot.com/-4p6k8mM7V7c/T6jolM6I_4I/AAAAAAAACL4/lTZyaeJyObM/s400/Change_Image_Opacity_Using_jQuery.jpg" alt="Cinque Terre" width="304" height="236" class="imgDemo">
    </div>
    <div class="col-md-4 ">
      <h2>Circle</h2>
      <p>The .rounded-circle class shapes the image to a circle:</p>
      <img src="http://3.bp.blogspot.com/-4p6k8mM7V7c/T6jolM6I_4I/AAAAAAAACL4/lTZyaeJyObM/s400/Change_Image_Opacity_Using_jQuery.jpg" alt="Cinque Terre" width="304" height="236" class="imgDemo">
    </div>
  </div>
</div>

【讨论】：

【解决方案3】：

您可以使用class 属性来代替id

演示

$(document).ready(function() {
    $(".imgDemo").css("opacity", 0.5);
    $(".imgDemo").hover(function() {
        $(this).animate({opacity: 1.0}, 500);
    }, function() {
        $(this).animate({opacity: 0.5}, 500);
    });
});

body
{
    padding: 10px;
   
}
span
{
    font-family : Arial;
    font-size : 14pt;
    color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container">
<div class="row">	
	<div class="col-md-4">
  <h2>Circle</h2>
  <p>The .rounded-circle class shapes the image to a circle:</p>            
  <img src="http://3.bp.blogspot.com/-4p6k8mM7V7c/T6jolM6I_4I/AAAAAAAACL4/lTZyaeJyObM/s400/Change_Image_Opacity_Using_jQuery.jpg""  alt="Cinque Terre" width="304" height="236" class="imgDemo"> 
</div>
<div class="col-md-4">
  <h2>Circle</h2>
  <p>The .rounded-circle class shapes the image to a circle:</p>            
  <img src="http://3.bp.blogspot.com/-4p6k8mM7V7c/T6jolM6I_4I/AAAAAAAACL4/lTZyaeJyObM/s400/Change_Image_Opacity_Using_jQuery.jpg""  alt="Cinque Terre" width="304" height="236" class="imgDemo"> 
</div>
<div class="col-md-4">
  <h2>Circle</h2>
  <p>The .rounded-circle class shapes the image to a circle:</p>            
  <img src="http://3.bp.blogspot.com/-4p6k8mM7V7c/T6jolM6I_4I/AAAAAAAACL4/lTZyaeJyObM/s400/Change_Image_Opacity_Using_jQuery.jpg""  alt="Cinque Terre" width="304" height="236" class="imgDemo"> 
</div>
</div>
</div>
</body>

【讨论】：

【解决方案4】：

为什么是 JS ？只需在所有图像上使用一个类，并避免使用重复的 id。 ID 应该是唯一的

body
{
    padding: 10px;
   
}
span
{
    font-family : Arial;
    font-size : 14pt;
    color: green;
}
.imgHover{
opacity:0.5;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}

.imgHover:hover{
opacity:1;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container">
<div class="row">	
	<div class="col-md-4">
  <h2>Circle</h2>
  <p>The .rounded-circle class shapes the image to a circle:</p>            
  <img src="http://3.bp.blogspot.com/-4p6k8mM7V7c/T6jolM6I_4I/AAAAAAAACL4/lTZyaeJyObM/s400/Change_Image_Opacity_Using_jQuery.jpg"  class="imgHover"  alt="Cinque Terre" width="304" height="236" id="imgDemo"> 
</div>
<div class="col-md-4">
  <h2>Circle</h2>
  <p>The .rounded-circle class shapes the image to a circle:</p>            
  <img src="http://3.bp.blogspot.com/-4p6k8mM7V7c/T6jolM6I_4I/AAAAAAAACL4/lTZyaeJyObM/s400/Change_Image_Opacity_Using_jQuery.jpg""  class="imgHover"  alt="Cinque Terre" width="304" height="236" id="imgDemo"> 
</div>
<div class="col-md-4">
  <h2>Circle</h2>
  <p>The .rounded-circle class shapes the image to a circle:</p>            
  <img src="http://3.bp.blogspot.com/-4p6k8mM7V7c/T6jolM6I_4I/AAAAAAAACL4/lTZyaeJyObM/s400/Change_Image_Opacity_Using_jQuery.jpg""  alt="Cinque Terre" width="304" height="236" id="imgDemo" class="imgHover"> 
</div>
</div>
</div>
</body>

【讨论】：