Visualizzazione dei risultati da 1 a 9 su 9
  1. #1
    Utente di HTML.it
    Registrato dal
    Jun 2010
    Messaggi
    113

    Mouseover che modifichi parametri di due classi diverse

    codice:
    <script>
    $(document).ready( 
       function(){ 
       $(".project img").mouseover( 
       function(){ 
       $(this).animate({ opacity: '0.65' }, 300); 
       $(".text-box").animate({ opacity: '1' }, 300);
    }) 
    
    
    $(".project img").mouseout( 
       function(){ 
       $(this).animate({ opacity: '1' }, 300); 
       $(".text-box").animate({ opacity: '0' }, 300);
       }) 
    })
    </script>

    Ciao a tutti,
    spero di essere stata abbastanza chiara nel titolo o di esserlo nella richiesta qua sotto:

    ho creato una lista di immagini e al passaggio del mouse sopra un singolo elemento (".project img") voglio che l'opacity cambi e che appaia una caption (".text-box") che ho già posizionato al centro dell'immagine.

    Il codice scritto finora modifica corretamente l'opacity della singola immagine interessata dal mouseover ma modifica tutte le immagini presenti nella pagina che possiedono la classe ".text-box", e non soltanto quella selezionata.

    Non so se il "this" può essere usato per multipli elementi o se sbaglio concettualmente la risoluzione di questo problema, spero sappiate aiutarmi voi e che non sia totalmente fuori strada.

    Grazie a tutti quelli che vorranno aiutarmi!

    Ines

  2. #2
    Ciao Ines,
    Come hai già constatato, l'istruzione

    codice:
    $(".text-box").animate({ opacity: '1' }, 300);
    Applicherà una opacity 1 a *tutte* le istanze della classe text-box.

    La soluzione sta proprio nell'utilizzo di *this*, che dovrai utilizzare sia per riferirti all'immagine da rendere visibile (come già fai) che per riferirti al caption.

    Supponiamo che questo sia il tuo HTML (Che non hai riportato nel porre il quesito, ahi ahi ahi... )
    codice:
    <figure class="project">
        <img src="" alt="">
        <figcaption class="text-box">Text</figcaption>
    </figure>
    Visto che l'evento è associato al tag img, il this nella funzione sarà, appunto, un riferimento al tag img.
    Per localizzare il giusto caption, farò sempre riferimento al this, ma risalirò al caption per mezzo del parent (contenitore) del tag img.

    codice:
    $(".project img").mouseout( 
       function(){ 
       $(this).animate({ opacity: '1' }, 300);
       var scope=$(this).parents('.project'); //riferimento al nodo padre
       $(".text-box",scope).animate({ opacity: '0' }, 300); //.text-box *nel* nodo padre
       }) 
    })
    Buon proseguimento.

  3. #3
    Conosco solo sommariamente le librerie JQuery etc., ma fortunatamente lucavizzi ti ha già risposto.

    In puro Javascript, ti mostro un uso del this con un esempio che già traccerebbe la via per fare quello che ti occorre ma appunto, in puro Javascript:
    codice:
    <script>
    function transform(element){
    element.style.opacity="0.4";
    }
    
    function repristinate(element){
    element.style.opacity="";
    }
    </script>
    <body bgcolor="#6f6">
    <img onmouseout="repristinate(this)" onmouseover="transform(this)" src="http://admiral-kolchak.narod.ru/index.files/image786.jpg">
    <img onmouseout="repristinate(this)" onmouseover="transform(this)" src="http://admiral-kolchak.narod.ru/index.files/image3791.jpg"><img 
    onmouseout="repristinate(this)" onmouseover="transform(this)" src="http://admiral-kolchak.narod.ru/index.files/image1149.jpg">
    </body>
    Per svilupparlo, bisognerebbe ampliarlo con proprietà di stile "parallele" a style.opacity che non tutti i browser riconoscono.
    E poi ovviamente, aggiungere una temporizzazione per l' effetto di animazione.

    Poi vedi una "vecchia" cosa di HTML:
    Tag IMG in-linea nel codice, lasciano uno spazio come carattere di testo se si va a capo così nel codice:
    codice:
    <img src="">
    <img src="">
    e allora se occorreva evitarlo, si andava a capo così:
    codice:
    <img src=""><img 
    src="">

  4. #4
    Utente di HTML.it
    Registrato dal
    Jun 2010
    Messaggi
    113
    Ciao Luca, grazie mille per la tua risposta!!!
    Non conoscevo questo utilizzo del This, in effetti non conosco molto il javascript e le guide che avevo consultato mostravano altri millemila modi di utilizzarlo.

    Risolto questo problema però mi sono accorta subito di un altro piccolo bug presente: appena passo col mouse sopra l’immagine, il text-box appare correttamente, ma appena arrivo sopra di lui questo scompare

    Ho provato a duplicare lo script di prima dedicandolo al text-box ma questo al massimo scompare e riappare, creando un effetto non corretto

    Hai ragione, dovevo indicare anche il mio markup, eccolo qui:

    codice:
    <div class="col-md-6 project">
        <a href="../page/">
            <img src="../img/image.png">
        </a>
        <a href="../page/">
            <div class="text-box">
                <p class="project-title”>Project Title</p>
                <p class="project-desc”>Description</p>
            </div>
        </a>
      </div>

  5. #5
    Quote Originariamente inviata da Ines_88 Visualizza il messaggio
    Ciao Luca, grazie mille per la tua risposta!!!
    Non conoscevo questo utilizzo del This, in effetti non conosco molto il javascript e le guide che avevo consultato mostravano altri millemila modi di utilizzarlo.

    Risolto questo problema però mi sono accorta subito di un altro piccolo bug presente: appena passo col mouse sopra l’immagine, il text-box appare correttamente, ma appena arrivo sopra di lui questo scompare

    Ho provato a duplicare lo script di prima dedicandolo al text-box ma questo al massimo scompare e riappare, creando un effetto non corretto

    Hai ragione, dovevo indicare anche il mio markup, eccolo qui:

    codice:
    <div class="col-md-6 project">
        <a href="../page/">
            <img src="../img/image.png">
        </a>
        <a href="../page/">
            <div class="text-box">
                <p class="project-title”>Project Title</p>
                <p class="project-desc”>Description</p>
            </div>
        </a>
      </div>
    Scompare perché applichi gli eventi mouseover/mouseout solo sul tag img, di conseguenza, quando il mouse si sposta sul caption, scatta l'evento mouseout applicato all'immagine.


    Conviene applicare gli eventi hover direttamente alla classe project e poi riferirsi agli elementi al suo interno.
    codice:
    $(".project").mouseout( 
       function(){
            var scope=$(this);// elemento con classe project oggetto dell'evento.
            $('img',scope).animate({ opacity: '1' }, 300); //opacity dell'immagine nel nostro .project
            $(".text-box",scope).animate({ opacity: '0' }, 300); //.text-box "figlio" del .project
       }) 
    })

  6. #6
    Utente di HTML.it
    Registrato dal
    Jun 2010
    Messaggi
    113
    In effetti suona più logico quello che dici

    Appena sono al mio pc stasera provo immediatamente e ti faccio sapere!

  7. #7
    Quote Originariamente inviata da Ines_88 Visualizza il messaggio
    In effetti suona più logico quello che dici

    Appena sono al mio pc stasera provo immediatamente e ti faccio sapere!


    Potresti ottenere lo stesso risultato anche utilizzando solo i CSS.

    codice:
    .project img, .project .text-box{
     transition: all 0.5s ease;
    }
    .project .text-box{
     opacity:0;
    }
    
    .project:hover .text-box{
     opacity:1;
    }
    .project:hover img{
     opacity:0.65;
    }

  8. #8
    Utente di HTML.it
    Registrato dal
    Jun 2010
    Messaggi
    113
    Sì, hai ragione, ma mi interessava comunque l'utilizzo multiplo del this, e grazie a te ho conosciuto questo misterioso "scope"

    Grazie mille, alla prossima!!!

  9. #9
    Utente di HTML.it
    Registrato dal
    Jun 2010
    Messaggi
    113
    Grazie anche a te, Enzo! Vedere quant'è complesso il "puro Javascript" mi fa apprezzare ancora di più l'utilizzo del Jquery!

Tag per questa discussione

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.