title: How to slow down onclick events inside my function or make them happen gradually? Looking for smooth transition
body: <p>I'm sure there is a simple fix for this and I just am unable to piece it together... In the event that the link with the id of "light_off" is clicked then I want all the little changes to take place, that part is working, but they're happening too abruptly. How do I slow them down or fade into the changes so the transition looks smoother? Do I fadeIn? Add "slow" duration? Animate? And if so, how would I implement that properly? Gee, I hope that makes sense. Any help would be appreciated! Thank you!!</p>
  
  <pre><code>    &lt;script&gt;
          $(document).ready(function(){
              $("#lights_off").click(function(){
                  $("#lights_off").fadeOut(1000);
                  $("#main").addClass(" lights_on");
                  $('#flavoredesign_logo').attr('src','img/logofinal.png');
                  $("#nav").css("color","#000000");
                  $("#nav").css("border-bottom"," #333 solid 1px");
  
              });
          });
      &lt;/script&gt;
  </code></pre>