Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <meta charset="utf-8">
  <title>Opacity</title>
</head>
<body>
<table>
  <tr>
    <td>
      <img class="first" src="http://i.imgur.com/nPNGjXd.jpg">
    </td>
    <td>
      <img class="first" src="http://i.allday2.com/62/be/89/1372292167_wheat_field_04.jpg">
    </td>
  </tr>
  <tr>
    <td>
      <img class="first" src="http://i.imgur.com/nE5w65X.jpg">
    </td>
    <td>
      <img class="first" src="http://i.imgur.com/uPvA4wS.jpg">
    </td>
  </tr>
  </table>
</body>
</html>
 
$(document).ready(function(){
  $('tr').mouseenter(function(){
    if(!$(this).hasClass('opa')){
      $(this).find('img').css('opacity',1);
    }
  }).mouseleave(function(){
    if(!$(this).hasClass('opa')){
      $(this).find('img').css('opacity',0.5);
    }
  });
  $('img').click(function(){
    var clotr=$(this).closest('tr');
    var trcls=clotr.attr('class');
    var imcls=$(this).attr('class');
    if(trcls!='opa'){
      clotr.addClass('opa').find('img').css('opacity',1); //в случае повторного клика
      clotr.siblings().removeClass('opa').find('img').css('opacity',0.5);
    }
    else{
      clotr.removeClass('opa').find('img').css('opacity',0.5);
    }
  });
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
deedpro
0viewers