图像不透明度不起作用

我正在尝试在图像上添加不透明度效果。它仅适用于第一个图像。此不透明度效果不适用于下一个图像。我也添加了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 必须是唯一的。或者，您可以使用类，通过将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>

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

但是，您根本不需要使用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>

而不是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>

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

相关内容

最新更新

热门标签：