Hide a tempo crea uno strano effetto

[idrev]

Salve ho creato un div immagine con effetti rollover e sopra ho applicato un'altro div con fondo bianco per coprire quello sottostante, l'effetto che voglio ottenere è che quando premo un determinato pulsante il div bianco sparisca e mi permetta di poterlo utilizzare. Ho provato una funzione in jquery con fadeOut ma io voglio che sparisca di netto senza la transizione. alla fine ho utilizzato questa funzione :

$().ready(
  function() {

   
    $(".r1").show();
    $(".r2").show();
    
    
    $("#p1").click(
      function() {
               
        if ($(".r1").is(":visible")) $(".r1").animate({'opacity':'0'},100); 
        if ($(".r2").is(":visible")) $(".r2").animate({'opacity':'0'},300); 
        
        
      }
    ); 

In questo modo ottengo piu o meno quello che voglio ma ho il problema che anche se sparisce resta comunque li il div bianco in trasparenza e non mi permette di utilizzare quello sottostante. Esiste un modo per impostare la funzione opacity e poi farlo sparire ? Ho provato anche con hide :

if ($(".r1").is(":visible")) $(".r1").hide(100); 

ma mi crea uno strano sfarfallio e una volta attivato tutti i div bianchi in cui lo richiamo spariscono ma si spostano tutti in alto a sinistra creando un brutto effetto ? come potrei risolvere ?

[Grambo]

if ($(".r1").is(":visible")) $(".r1").animate({'opacity':'0'},100);
if ($(".r1").css('opacity')==0) $(".r1").css('visibility','hidden');

non va bene?


EDIT:
ancora meglio

if ($(".r1").is(":visible")){ 
	$(".r1").animate({
		opacity: '0'
	}, 100, function() {
		$(".r1").css('visibility','hidden');
	});
}

[idrev]

no non va in questo modo penso dovuto al fatto r1 ed r2 sono contenuti all'interno di un div ma anche mettendo l'opacità anche al div esterno questo non va via

[idrev]

sono riuscito, ho applicato la function al div esterno

function() { $(".divesterno").css('visibility','hidden'); 

grazie per l'aiuto