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 ?