图像不透明度不起作用

时间：2018-08-24 06:57:15

标签： javascript jquery html css

我正在尝试在图像上添加不透明度效果。它仅适用于第一张图片。这种不透明效果不适用于下一张图像。我也添加了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>

4 个答案:

答案 0 :(得分：3)

您的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>

答案 1 :(得分：1)

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

但是您根本不需要使用JS。在这种情况下，使用CSS更适用，并且比JS动画表现更好。为此，请使用id选择器和:hover规则。试试这个：

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

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

.imgDemo:hover {
  opacity: 1;
}

答案 2 :(得分：0)

您可以使用id属性代替class

演示 

$(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>

答案 3 :(得分：0)

为什么 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>

相关问题
最新问题