javascript - if element has opacity=1 not working -

i have piece of code that's not working , can't figure out why. here's simplified code:

html:

<div id="objinfo">     <div id="button"></div>     <img src="img/x.png" class="obj_x"> </div> 

css:

#objinfo { opacity: 0; display: none } 

javascript:

if ($('#objinfo').css('opacity') != "1") {     $("#button").click(function(){         $("#objinfo").css("display", "block");         $("#objinfo").animate({opacity: 1, top: "-25px"});     }); } else {      $(".obj_x").click(function(){         $("#objinfo").css("display", "none");         $("#objinfo").animate({opacity: 0, top: "+25px"});     });  } 

so basically, wanna have popup (#objinfo) appears when #button clicked , disappears when .obj_x clicked. , also, want #objinfo disappear when click outside of it. (i haven't added code, because there's no need to. once if statement works that'll least problem solved. , that's why need statement) if statement there check whether box displayed or not, , when is, want able toggle off using either dedicated obj_x button or click outside box.

i hope explained enough guys. first post, please gentle... ;) appreciated!

i wanna have popup (#objinfo) appears when #button clicked , disappears when .obj_x clicked

the following code should work:

html

<div id="objinfo">   <div class="obj_x">blabla</div> </div>  <button id="show">show</button> 

css

#objinfo { display: none } 

js

function hideblock(){      $("#objinfo").css('display','none')     $("#show").css('display','inline-block')      $(document).mousedown(function(){ return false;}) }  function displayblock(){      $("#objinfo").css('display','block')     $("#show").css('display','none')      $(document).mousedown( hideblock ) }   $("#show").click( displayblock ) $(".obj_x").click( hideblock ) 

http://jsfiddle.net/rpdmwqo8/1/