淡入和淡出div标签

Question

I have 2 div tag.If i click div with class adm, emp div want to get blur.After I clicked emp div It back to its own state and adm div will get blur.Now blured div doesn't back to its original state.

I attached html and jquery code.

jquery
  <script>
$(document).ready(function(){
  $(".adm").click(function(){
  $(".emp").fadeTo("slow",0.15);
   if($(".adm").fadeTo(0.15))
    $(".adm").fadeIn();
  });
$(".emp").click(function(){
$(".adm").fadeTo("slow",0.15);
 if($(".emp").fadeTo(0.15))
  $(".emp").fadeIn();
 });
});

 html 
 <div class="adm">
  ...
 </div>
 <div class="emp">
  ...
 </div>

If I click employer employee will blur. after I clicked employee It doesn't back to its original state.now It should appear as third image

Answer 1

You can use use fadeTo method to change the transparency of the current element.

Modified jQuery Code

$(".adm").click(function(){
    $(".emp").fadeTo("slow",0.15);
    $(".adm").fadeTo("slow",1);
});

$(".emp").click(function(){
    $(".adm").fadeTo("slow",0.15);
    $(".emp").fadeTo("slow",1);
});

jsFiddle link - http://jsfiddle.net/6ynwnzgr/

Answer 2

use this, you don't need if statements

$(".adm").click(function(){
   $(".emp").fadeTo("slow",0.15);
   $(".adm").fadeTo("slow",1);
  });

$(".emp").click(function(){
 $(".adm").fadeTo("slow",0.15);
 $(".emp").fadeTo("slow",1);
 });

working demo http://jsfiddle.net/243qgkn1/1/

Answer 3

This should be your code:

$(document).ready(function(){
  $(".adm").click(function(){
  $(".emp").fadeTo("slow",0.15);
   $(".adm").fadeTo("slow",1);
  });
$(".emp").click(function(){
$(".adm").fadeTo("slow",0.15);
$(".emp").fadeTo("slow",1);
 });
});

Fiddle Link