Immagine scompare ed esce testo, secondo click torna tutto com'era..

otto9due

Utente Attivo
22 Feb 2014
529
21
28
Anzitutto Buongiorno e saluti a tutti, sono parecchi mesi che non entro qui sul forum, quindi mi sembrava doveroso aprire con un mega saluto prima di esporre il mio problemino.
Veniamo a noi sto cercando di creare un mini effetto jquery che mi permetta al primo click su un div o un immagine contenuta al suo interno di far sparire l'immagine e comparire un testo ( e fino a qui ci sono ). Il problema è quando devo fare il contrario. Mi spiego meglio, se uso solo l'immagine fila tutto liscio, se devo togliere anche il testo no.
Come al solito vi lascio lo script che ho prodotto fino ad ora, non sono molto esperto di questo linguaggio, ma mi affascina parecchio. Se qualcuno gentilmente volesse dargli uno'occhiata gliene sarei grato.

HTML:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
   $(document).ready(function(){
    $("div#1").click(function(){
        $("img.1c").fadeToggle("slow", function(){ $("div#1").html("Prova Test <b>Grassetto</b>"); });
    });
   });
 </script>
</head>
<body>
  <div id="1" style="height:80px;"><img class="1c" src="http://photoblogstop.com/wp-content/uploads/2012/07/Sierra_HDR_Panorama_DFX8048_2280x819_Q40_wm_mini.jpg" height="80" ></div>
  <div id="2" style="height:80px;"><img class="2c" src="http://photoblogstop.com/wp-content/uploads/2012/07/Sierra_HDR_Panorama_DFX8048_2280x819_Q40_wm_mini.jpg" height="80" ></div>
  <div id="3" style="height:80px;"><img class="3c" src="http://photoblogstop.com/wp-content/uploads/2012/07/Sierra_HDR_Panorama_DFX8048_2280x819_Q40_wm_mini.jpg" height="80" ></div>
  <div id="4" style="height:80px;"><img class="4c" src="http://photoblogstop.com/wp-content/uploads/2012/07/Sierra_HDR_Panorama_DFX8048_2280x819_Q40_wm_mini.jpg" height="80" ></div>
  <div id="5" style="height:80px;"><img class="5c" src="http://photoblogstop.com/wp-content/uploads/2012/07/Sierra_HDR_Panorama_DFX8048_2280x819_Q40_wm_mini.jpg" height="80" ></div>
  <div id="6" style="height:80px;"><img class="6c" src="http://photoblogstop.com/wp-content/uploads/2012/07/Sierra_HDR_Panorama_DFX8048_2280x819_Q40_wm_mini.jpg"height="80"></div>
</body>
</html>
 

otto9due

Utente Attivo
22 Feb 2014
529
21
28
Forse ho risolto così, attendo comunque vostri onsigli per far meglio ;)
Grazie e a presto.
Codice:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <style>
  .sc1{ display:none; overflow-y:scroll; height:80px; width: 15%; border-color: black;}
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
   $(document).ready(function(){
        $("div#1").click(function(){
            $("img.1c").fadeToggle("slow", function(){ $("div.sc1").fadeToggle(); });
    });
   });
 </script>
</head>
<body>
  <div id="1" style="height:80px;">
    <div class="sc1">Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa. Lorem Ipsum è considerato il testo segnaposto standard sin dal sedicesimo secolo, quando un anonimo tipografo prese una cassetta di caratteri e li assemblò per preparare un testo campione. È sopravvissuto non solo a più di cinque secoli, ma anche al passaggio alla videoimpaginazione, pervenendoci sostanzialmente inalterato. Fu reso popolare, negli anni ’60, con la diffusione dei fogli di caratteri trasferibili “Letraset”, che contenevano passaggi del Lorem Ipsum, e più recentemente da software di impaginazione come Aldus PageMaker, che includeva versioni del Lorem Ipsum.</b></div>
    <img class="1c" src="http://photoblogstop.com/wp-content/uploads/2012/07/Sierra_HDR_Panorama_DFX8048_2280x819_Q40_wm_mini.jpg" height="80" >
  </div>
  <div id="2" style="height:80px;"><img class="2c" src="http://photoblogstop.com/wp-content/uploads/2012/07/Sierra_HDR_Panorama_DFX8048_2280x819_Q40_wm_mini.jpg" height="80" ></div>
  <div id="3" style="height:80px;"><img class="3c" src="http://photoblogstop.com/wp-content/uploads/2012/07/Sierra_HDR_Panorama_DFX8048_2280x819_Q40_wm_mini.jpg" height="80" ></div>
  <div id="4" style="height:80px;"><img class="4c" src="http://photoblogstop.com/wp-content/uploads/2012/07/Sierra_HDR_Panorama_DFX8048_2280x819_Q40_wm_mini.jpg" height="80" ></div>
  <div id="5" style="height:80px;"><img class="5c" src="http://photoblogstop.com/wp-content/uploads/2012/07/Sierra_HDR_Panorama_DFX8048_2280x819_Q40_wm_mini.jpg" height="80" ></div>
  <div id="6" style="height:80px;"><img class="6c" src="http://photoblogstop.com/wp-content/uploads/2012/07/Sierra_HDR_Panorama_DFX8048_2280x819_Q40_wm_mini.jpg"height="80"></div>
</body>
</html>
 
Ultima modifica:

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao, prova cosi:
Codice:
 $("div").click(function () {
                    $(this).children().fadeToggle("slow");
                });
dovrebbe valere per tutti gli elementi, non ho testato
 

otto9due

Utente Attivo
22 Feb 2014
529
21
28
Provo e ti faccio sapere..
Unica cosa in pratica mentre nel primo toggle tutto funziona correttamente al ritorno c'è un attimo in cui prima deve scomparire il testo e poi ci si piazza l'immagine che nel frattempo sforma il div per qualche secondo.. come fixare?
Grazie per la gentile attenzione come sempre
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Dagli una lunghezza fissa in px;
 

otto9due

Utente Attivo
22 Feb 2014
529
21
28
Il problema è che ho una pagina responsive.. larghezza imm 20%


Saluti G.G.
 
Ultima modifica:

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
dagliela in percentuale, non cambia, l'importante è ceh tutti i contenitori abbiano la stessa
 
Discussioni simili
Autore Titolo Forum Risposte Data
M Upload immagine con javascript problemi con FormData() Javascript 1
M Visulizzare immagine con php PHP 8
Stex1967 Salvare una immagine che si trova su porta TCP 8080 di altro sito PHP 6
L Come caricare un'immagine in Canvas dinamicamente Javascript 0
L salvare una immagine elaborata in canvas Javascript 1
L salvare una immagine elaborata in canvas Javascript 1
Y Come caricare e visualizzare un'immagine PHP 0
S Testo scrolla su immagine che cambia HTML e CSS 0
M Quando ha l'immagine ingrandita è possibile fare rotazione per ritagliare? Photoshop 0
R Caricamento immagine su cartella remota + mysql PHP 3
R Non riesco a rinnovare l'immagine di sfondo PHP 1
R Non riesco a cambiare l'immagine di sfondo PHP 4
L Upload di un'immagine all'interno di un database usando php PHP 6
G Modifica immagine di sfondo attraverso un bottone PHP 18
F photoshop portable : spostamento immagine Photoshop 0
A Server Apache immagine not found (ERROR 404) Apache 5
P [Photoshop] ritagliare una immagine Photoshop 1
S [PHP] Recupero nome immagine da Form con input file PHP 3
D [Javascript] salvare immagine canvas - paypal Javascript 0
D [HTML] Inviare un link contenente un' immagine HTML e CSS 4
M [PHP] Cercare l'ultima immagine caricata in una cartella datata PHP 15
C [Photoshop] bordi tondi come posso fare per ottenerli come nell'immagine allegata Photoshop 2
M [HTML] Tasto condivisione social e immagine HTML e CSS 2
R [HTML] Effetto carousel di testo su immagine fissa HTML e CSS 2
L [HTML] problema sfondo tutto schermo con immagine HTML e CSS 1
A Php variabile immagine inesistente PHP 4
R [PHP] Testo su immagine al passaggio del mouse PHP 2
L [PHP] controllo dimensione immagine per il resize PHP 2
felino [Wordpress] Immagine di sfondo (sotto il template) WordPress 8
Shyson [HTML] Sovrapporre un'immagine su un'altra HTML e CSS 2
A [PHP] Segnalazione in up-load immagine PHP 2
C [PHP] Scrivere testo su immagine PHP 3
E [HTML] Allineamento immagine agli angoli inferiori di un div HTML e CSS 12
A [WordPress] Link multiplo su immagine WordPress 9
I [Photoshop] Come realizzare immagine tonalità di grigio Photoshop 0
edittaruocco [Photoshop] Immagine in editor grafico Photoshop 0
A Salvare immagine ridimensionata in MySql con GD PHP 12
I Effetto glowing su immagine con GIMP Webdesign e Grafica 0
Selenio89 problema a caricare immagine con html. dove sbaglio? HTML e CSS 25
D [Photoshop] aggiungere piu tracce a immagine Photoshop 4
Merlina3377 [PHP] modificare file su form immagine thump PHP 1
R [Photoshop] Come creare questo effetto (v.immagine)?(sovrapposizione immagini in modo uniforme) Photoshop 2
U COLORAZIONE IMMAGINE IN BIANCO E NERO. Presentati al Forum 0
M [Javascript] Adattare immagine di background all'altezza dello smartphone Javascript 1
O [PHP] problema estrazione immagine da db PHP 12
felino [Javascript] [jQuery] Slick Carousel: visualizzare una porzione dell'immagine successiva Javascript 0
K [HTML] Thumbnail (mouseover) + Popup immagine HTML e CSS 1
A [HTML] "Tonalita colore immagine del body> HTML e CSS 2
jailbait [PHP] Upload immagine e stampa a schermo PHP 0
asevenx [HTML] -webkit-filter solo su immagine di background HTML e CSS 5

Discussioni simili