0

I am trying to add opacity effect on the image. Its working only for the first image. This opacity effect is not working for the next images. I added jquery script also but its not working. Thanks in adance

$(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>
Narendra Jadhav
  • 10,052
  • 15
  • 33
  • 44
Raghavendra
  • 19
  • 6

4 Answers4

3

Your ids need to be unique. Alternatively, you can uses classes, by replacing id with class, and #imgDemo with .imgDemo, like so:

$(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>
Steve
  • 10,435
  • 15
  • 21
1

The issue with your JS code is that your using the same id attribute repeated multiple times when they must be unique within the DOM.

However you don't need to use JS for this at all. It's more applicable in this case to use CSS, and it performs better than JS animation. To do it use the :hover selector and the transition rule. Try this:

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>
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
0

Instead of id you could use class property

DEMO

$(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>
Narendra Jadhav
  • 10,052
  • 15
  • 33
  • 44
0

Why JS ? Just use a class on all images and avoid using duplicate id's. ID should be unique

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>
Muhammad Osama
  • 985
  • 8
  • 17