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
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/
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);
});
});
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/