Problemi con fadeIn e fadeOut

[Meliupa]

Salve ragazzi, questo è il mio primo messaggio sul forum, e spero di fare tutto correttamente.
Vi spiego il mio problema, dovrei semplicemente visualizzare un determinato div, quando clicco su un divo e farlo sparire successivamente.
Un operazione molto semplice, ma non riesco a venirne proprio a capo, vi posto il codice html e j query.
Logicamente le regole css di #textlink sono basilari di aspetto, con un posizionamento assoluto, e la regola display:none:
Copio sia il codice del fadeIn che la funzione che mi permette, di aggiungere man mano, una classe, poichè i link legati ad ogni singola pagina dovrebbero apparire insieme a menuAttivo

$(".anim4").click(function(e) {
        $("#textlink2").fadeIn(4000);
    });
$(".anim2").click(function(e) {
        $("#textlink").fadeIn(4000);
    });
$(".anim3").click(function(e) {
        $("#textlink3").fadeIn(4000);
    });



$(".att").click(function(e) {
			if(!$(this).hasClass("menuAttivo")){
			$(".att").removeClass("menuAttivo");
			$(this).addClass("menuAttivo");
			}
		e.preventDefault();
    });

<div id="coll"><div  class="subpage" id="textlink" >
  <h1><a href="../demo2.html">Title1, example lorem ipsum generatore di testo.</a></h1>
</div>
<div  class="subpage" id="textlink3" >
  <h1><a href="../demo2.html">Title1, example lorem ipsum generatore di testo.</a></h1>
</div>
<div  class="subpage" id="textlink2" >
  <h1><a href="../demo2.html">Title1, example lorem ipsum generatore di testo.</a></h1>
</div>
</div>
<div id="contimg">
  <a href="js/ond.mp4" class="anim playlist-btn"><div id="apDiv1" class="att menuAttivo"></div></a>
  <a href="js/ond2.mp4" class="anim2 playlist-btn"><div id="apDiv2" class="att"><a href="#textlink"></a></div></a>
  <a href="js/ond3.mp4" class="anim3 playlist-btn"><div id="apDiv3" class="att"></div></a>
  <a href="js/ond4.mp4" class="anim4 playlist-btn"><div id="apDiv4" class="att"></div></a>
</div>

Spero abbiate capito cosa intendo, purtroppo sto scrivendo con molta ansia perchè devo consegnare a breve, spero mi possiate aiutare

[KillerWorm]

Ciao, benvenuto/a sul forum.
Non mi è tanto chiaro cosa vuoi ottenere e ho qualche difficoltà a comprendere la logica di funzionamento del tuo codice.
Ad ogni modo noto qualche errore nella struttura html: i tag <a> non possono essere annidati. Dovresti correggere quello dentro il div apDiv2.
A parte quell'errore, a me il fadein funziona. Se clicco sui tre link compaiono i relativi div.
Cosa non riesci a fare esattamente?
Nel caso, puoi postare un link alla pagina pubblica?

[Meliupa]

il problema è il seguente, quei link si trovano su un'immagine e sono a posizionamento assoluto, perchè io avevo creato una mappa immagine, ma avevo difficoltà nel creare un effetto hover, e ad aggiungere una funzione addClass e removeClass con jquery, di conseguenza ho creato questi link, e per poterli animare ho messo il tag <a> fuori dal div in maniera che si animasse.
Ora è proprio a causa di questa struttura incomprensibile (anche a me ) che non riesco a far funzionare il fadeIn e il fadeOut.
Vi poso comunque il link del sito.
http://meliupa.hostei.com/root/

[KillerWorm]

Ho visto ora il sito e, se non sbaglio, ho visto che ci stai lavorando proprio ora. Non capisco dove sta il problema e se lo hai risolto, o se lo stai risolvendo.
Se hai bisogno d'aiuto facci sapere.

[carlomarx]

Vi poso comunque il link del sito.
http://meliupa.hostei.com/root/

Cliccando sulla freccia a destra si apre un fastidioso popup con pubblicità ingannevole Io considerei questo sufficiente a chiudere qui questa discussione…

[Meliupa]

So che appare il pop up, appare perché il sito é caricato su un hosting gratuito.
Comunque io ho due probelmi, vorrei che cliccando sulle bolle di sotto potessero apparire dei link tramite fadeIn, e ad ogni bolla deve corrispondere un link diverso.
E poi vorrei che sempre grazie al link su queste bolle ci fosse un suono al click.
Vi sarei veramente grato se poteste aiutarmi.
Il codice che ho inserito sopra é la parte html delle bolle

[KillerWorm]

Fare una semplice animazione (come un fadein) al click su un dato elemento è abbastanza semplice. Non capisco la tua difficoltà nel riuscire ad impostare una cosa del genere. Ad ogni modo trovo tutto il codice della pagina molto confuso, per cui non riesco a capire come poterti aiutare se non disfando tutto e rifacendo tutto da capo in modo ordinato.. ma chiaramente non è il caso.

Ti posto giusto un esempio, vedi se riesci a riutilizzarlo/adattarlo per ciò che ti serve:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <style type="text/css">
      /* Pagine */
      #pagine>div{
        position:absolute;
        display:none;
      }
      
      /* Il mio menu coi cerchietti*/
      #menu{
        position:fixed;
        width:100%;
        bottom:0;
        background:Lavender;
        padding:50px;
        text-align:center;
      }
      #menu>a{
        display:inline-block;
        margin:50px;
        border:3px solid transparent;
        border-radius:50%;
        outline:none;
      }
      #menu>a:after{
        content:"";
        display:block;
        width:35px;
        height:35px;
        border-radius:50%;
        box-sizing:border-box;
      }
      
      /* Un po' di colori per i diversi pulsanti menu */
      #menu>a[data-pagina="1"]:after{
        border:6px solid Purple;
        background:White;
      }
      #menu>a[data-pagina="2"]:after{
        background:Teal;
      }
      #menu>a[data-pagina="3"]:after{
        border:6px solid Green;
        background:White;
      }
      
      /* Effetti hover e pulsante selezionato */
      #menu>a:hover{
        box-shadow:0px 0px 4px 4px rgba(80,140,210,.7);
      }
      #menu>a.attivo{
        background:rgba(80,140,210,.7);
      }
      #menu>a.attivo:after{
        opacity:.3;
      }
    </style>
    <script type="text/javascript">
      $(function(){
        $("#menu>a").click(function( event ) {                                  // Al click su ciascun pulsante menu
          event.preventDefault();                                               // Prevengo l'azione di default per il tag a
          $(this).siblings().removeClass("attivo").end().addClass("attivo");    // Aggiorno il pulsante attivo
          $("#pagine div.pag-"+$(this).data("pagina"))                          // Seleziono la pagina corrispondente
          .siblings().stop().fadeOut(300)                                       // Fade-out sulla vecchia pagina
          .end().stop().fadeIn(300);                                            // Fade-in sulla nuova pagina
        })
      })
    </script>
  </head>
  <body>
  
    <div id="pagine">
      <div class="pag-1">
        <h1>Pagina 1</h1>
      </div>
      <div class="pag-2">
        <h1>Pagina 2</h1>
      </div>
      <div class="pag-3">
        <h1>Pagina 3</h1>
      </div>
    </div>

    <div id="menu">
      <a href="#" data-pagina="1"></a>
      <a href="#" data-pagina="2"></a>
      <a href="#" data-pagina="3"></a>
    </div>

  </body>
</html>

Per l'audio al click fai qualche ricerca sul forum, mi ricordo di aver già visto qualcosa. Se ritieni ti serva aiuto, conviene comunque aprire una nuova discussione perché si tratta di un altro argomento (questa discussione è già abbastanza ingarbugliata così).