Jquery fade effect[PROJECT]

JavaScript
1

good evening,

I’am trying for exercise to create the fade effect in jquery.
I chose different type of text whit your button, and each button brings up the text description…ok

I wish every text has the fade. How can I do?

this code for example:
“click button1 fadeIn the text1”
“click button2 fadeIn the text2 and fadeOut the text1” ecc…

  $(document).ready(function () {            
  $("#button1").click(function(){
    $("#text1").fadeIn(1000);
  });

  $("#button2").click(function(){
    $("#text2").fadeIn(1000);
  });

   $("#button3").click(function(){
    $("#text3").fadeIn(1000);
  });

  });

How can I keep the code? Thank’s a lot for the answers.

2

lyro86,

Can you post a link to a test page that shows how this works and looks at this time?

There are no "fade-out"s in your code, so I’m wondering if there isn’t more to it that just the jQ shown.

3

I don’t know how to work fadeout properly, thank’s for the regards, by.

follow my description in the post.

4

You DID say that this is an exercise; therefore, I assume a learning experience. If that is true, then please show us what you have written. I would expect to see a working HTML page with three text fields or text boxes and with your JavaScript at the bottom or a link to your JS file. We are very glad to help you learn, but we would like to see what you have written so we will understand where you are in your education.

:slight_smile:

1 Like
5

It would be easy enough to grab and fadeOut other text#s in each function, though that might get messy if you are dealing with a lot of them.

Maybe the accordion widget would be a better choice?

6

ok thank’s for the interesting…

here my project: Hope you like it: Sorry the indentation style :smile:

 <!DOCTYPE html>
 <html>
 <head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8">
 <meta name="generator" content="PSPad editor, www.pspad.com">
 <title></title>

 <style>
 #lista{ float:right;}
 ul{cursor:pointer; width:100px; list-style-type:none; margin:0; padding:0; text-align:center;}
 .lista{display:none;}
  .tendina{width:100px; padding:1em; border:1px solid grey; border-radius:0px 10px 10px 0px;}
  .lista li{margin-top:5px; border:1px solid grey; padding:5px;}
  .box{ width:500px; height:400px; margin:auto; margin-top:50px;}
  .boxtesto{border:1px solid grey; width:70%; height:100%;
   padding:1em; border-radius:10px 0px 0px 10px;}
   #tendina2{margin-top:4px;}
  #testogatto{display:none;}
   #testotopo{display:none;}
  </style>

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>    

              <script>

    $(document).ready(function () {
         $("#lista li").click(function () {
        //mostra sottomenu
          $("ul", this).slideToggle("slow");
    });
  
  $(".tendina").hover(function(){
    $(this).animate({width:"150px"}, 500);
       }, function(){
       $(this).animate({width:"100px"}, 500);
      });
  
     $("#btntestogatto").click(function(){
       $("#testogatto").fadeIn(1000);
       });
  
     $("#btntestotopo").click(function(){
       $("#testotopo").fadeIn(1000);
      });
    
  
     });




       </script>  

      </head>
    <body>



<div class="box">

 <ul id="lista">
  <li><div class="tendina">colori</div>
    <ul class="lista">
      <li>giallo</li>
      <li>rosso</li>
      <li>verde</li>
    </ul>
  </li>  
  <li><div class="tendina" id="tendina2">animali</div>
    <ul class="lista">
      <li id="btntestogatto">gatto</li>
      <li id="btntestotopo">topo</li>
      <li>gallina</li>
    </ul>  
  </li>   
      
</ul>

<div class="boxtesto">
<div id="testogatto">
<h1>Il gatto</h1>
<p>
Si contano una cinquantina di razze differenti riconosciute con certificazioni.
Essenzialmente territoriale e crepuscolare, il gatto e' un predatore di piccoli
animali, specialmente roditori. Per comunicare utilizza vari vocalizzi
(piu' di sedici), le fusa, le posizioni del corpo e produce dei feromoni.
Puo' essere addestrato a obbedire a semplici comandi e puo' imparare da solo
a manipolare svariati meccanismi, anche complessi, 
tra cui le maniglie delle porte o le chiusure delle gabbie.
E' il felino col piu' vasto areale nel mondo e con la popolazione piu' numerosa,
protagonista anche di fenomeni di inselvatichimento cosi' ampi da determinarne 
l'inclusione nella lista delle cento specie invasive piu' dannose da parte
dell'Unione Internazionale per la Conservazione della Natura.
</p>

</div>

<div id="testotopo">
<h1>Il Topo</h1>
<p>
Si tratta della specie di gran lunga piu' diffusa del genere Mus,
rappresentato nel mondo da una quarantina di specie:
il topo domestico si puo' infatti trovare comunemente in quasi tutti
i paesi del mondo, spesso al fianco degli umani,
che involontariamente gli procurano vitto ed alloggio,
ma non sempre in armonia con loro, 
in quanto i topi possono arrecare danni anche ingenti alle colture
ed alle dispense di cibo,
oltre a rendersi vettori di una serie di malattie, come la leptospirosi.
</p>

</div>

</div>


</div>                   

  </body>
    </html>
7

First, I’d not hard-code all those button and text IDs in your JS; instead, you could reference the element to show in a data-attribute like

<ul class="lista">
  <li data-ref="#testogatto">gatto</li>
  <li data-ref="#testotopo">topo</li>
</ul>

Then you can add the event listeners in a more generic way like

const textBoxes = $('.boxtesto > div')

$('.lista li').click(event => {
  const ref = event.target.dataset.ref
  const current = textBoxes.filter(':visible')
  const next = textBoxes.filter(ref)

  if (current.length) {
    current.fadeOut(1000, () => {
      next.fadeIn(1000)
    })
  } else {
    next.fadeIn(1000)
  }
})

Note the 2nd argument of .fadeOut(), which is a function that gets called when the animation is finished. If the element is already hidden it would get called immediately though, which is why we have to filter for those being visible.

2 Likes
8

I have not used your code because it is too complicated for me, if you can, still give me suggestions, thanks :blush:

i did it this way, here my code-complete:

  <!DOCTYPE html>
 <html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator" content="PSPad editor, www.pspad.com">
   <title></title>

  <style>
  body{font-family:verdana;}
   #lista{ float:right;}
   ul{cursor:pointer; width:100px; list-style-type:none; margin:0; padding:0; text-align:center;}
  .lista li:hover{color:orangered; font-weight:bold;}
   .tendina:hover{color:orangered; font-weight:bold;}
   .lista{display:none;}
   .tendina{width:100px; padding:1em; border:1px solid grey; border-radius:0px 10px 10px 0px;}
    .lista li{margin-top:5px; border:1px solid grey; padding:5px;}
    //.tendina:hover{background-color:yellow;}
   .box{ width:500px; height:400px; margin:auto; margin-top:50px;}
 .boxtesto{font-size:11pt; border:1px solid grey; width:70%; height:100%;
 padding:1em; border-radius:10px 0px 0px 10px;}
   #tendina2{margin-top:4px;}
   #testogatto{display:none;}
   #testotopo{display:none;}
   </style>

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>    

  <script>

    $(document).ready(function () {
      $("#tendina1").click(function () {
        //mostra sottomenu
        $("#lista1").slideDown("slow");
  });
  
  $("#tendina2").click(function () {
        //mostra sottomenu
        $("#lista2").slideDown("slow");
  });
  
   $("#tendina1").click(function () {
        //nascondi sottomenu
        $("#lista2").slideUp("slow");
  });
  
  $("#tendina2").click(function () {
        //nascondi sottomenu
        $("#lista1").slideUp("slow");
  });
  
  $(".tendina").hover(function(){
    $(this).animate({width:"150px"}, 500);
  }, function(){
    $(this).animate({width:"100px"}, 500);
  });
  
  $("#btntestogatto").click(function(){
    $("#testogatto").fadeIn(1000);
  });
  
   $("#btntestogatto").click(function(){
    $("#testotopo").hide();
  });
  
  $("#btntestotopo").click(function(){
    $("#testotopo").fadeIn(1000);
  });
  
  $("#btntestotopo").click(function(){
    $("#testogatto").hide();
  });

  });




  </script>

  </head>
   <body>



<div class="box">

 <ul id="lista">
  <li class="tendina" id="tendina1">colori</li>
    <ul class="lista" id="lista1">
      <li>giallo</li>
      <li>rosso</li>
      <li>verde</li>
    </ul>  
  <li class="tendina" id="tendina2">animali</li> 
    <ul class="lista" id="lista2">
      <li id="btntestogatto">gatto</li>
      <li id="btntestotopo">topo</li>
      <li>gallina</li>
    </ul>  
    
      
</ul>

<div class="boxtesto">
<div id="testogatto">
<h1>Il gatto</h1>
<p>
Si contano una cinquantina di razze differenti riconosciute con certificazioni.
Essenzialmente territoriale e crepuscolare, il gatto e' un predatore di piccoli
animali, specialmente roditori. Per comunicare utilizza vari vocalizzi
(piu' di sedici), le fusa, le posizioni del corpo e produce dei feromoni.
Puo' essere addestrato a obbedire a semplici comandi e puo' imparare da solo
a manipolare svariati meccanismi, anche complessi, 
tra cui le maniglie delle porte o le chiusure delle gabbie.
E' il felino col piu' vasto areale nel mondo e con la popolazione piu' numerosa,
protagonista anche di fenomeni di inselvatichimento cosi' ampi da determinarne 
l'inclusione nella lista delle cento specie invasive piu' dannose da parte
dell'Unione Internazionale per la Conservazione della Natura.
</p>

</div>

<div id="testotopo">
<h1>Il Topo</h1>
<p>
Si tratta della specie di gran lunga piu' diffusa del genere Mus,
rappresentato nel mondo da una quarantina di specie:
il topo domestico si puo' infatti trovare comunemente in quasi tutti
i paesi del mondo, spesso al fianco degli umani,
che involontariamente gli procurano vitto ed alloggio,
ma non sempre in armonia con loro, 
in quanto i topi possono arrecare danni anche ingenti alle colture
ed alle dispense di cibo,
   oltre a rendersi vettori di una serie di malattie, come la leptospirosi.
     </p>

     </div>

     </div>


     </div>                   

    </body>
     </html>
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.