Hide a tempo crea uno strano effetto

idrev · 12 Apr 2013

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 :

PHP:

$().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 :

PHP:

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 ?

helpdesk · 12 Apr 2013

Ciao, potresti fare qualcosa di questo tipo se ho ben capito:

PHP:

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>

$(document).ready(function(){
  $("button").click(function(){
    $("#p1").toggle();
  });
});

</script>

</head>
<body>

<button>CLICCA</button>
<div id="p1">
  <p>
    Al click del tasto clicca il contenitore #p1
    sparirà senza FadeOut progressivo.
  </p>
</div>

</body>
</html>

idrev · 12 Apr 2013

helpdesk ha scritto:

Ciao, potresti fare qualcosa di questo tipo se ho ben capito:

PHP:

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>

$(document).ready(function(){
  $("button").click(function(){
    $("#p1").toggle();
  });
});

</script>

</head>
<body>

<button>CLICCA</button>
<div id="p1">
  <p>
    Al click del tasto clicca il contenitore #p1
    sparirà senza FadeOut progressivo.
  </p>
</div>

</body>
</html>

Ho risolto in questo modo

PHP:

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

applicando la funsione al div esterno che li contiene. Grazie

Cerca

Cerca

Hide a tempo crea uno strano effetto

idrev

Utente Attivo

helpdesk

Utente Attivo

idrev

Utente Attivo

Discussioni simili