-1

I am looking to hide element on .ready and show them with animation onclick. I tried to do it this way

$(document).ready(function() {
  $('.bio').hide();
});

$('.anotherdiv).onclick(function() {
  $('.bio').show(2000).animate({ left:'15em' }, 2500);
]);

I know I am probably way off.

Ryan Ternier
  • 8,714
  • 4
  • 46
  • 69
Eddie Weldon
  • 1
  • 4

2 Answers2

3

There's a couple of issues.

  • onclick should be just click
  • The click handler needs to be within the document.ready block so that it executes once the DOM has been intitialised.
  • There's a missing ' in the .anotherdiv selector
  • ] should be } in the closing of the click handler

Also note that you should really use CSS to hide element initially so that you don't get a FOUC (flash of unstyled content) as the page loads. Try this:

$(document).ready(function() {
  $('.anotherdiv').click(function() {
    $('.bio').show(2000).animate({
      left: '15em'
    }, 2500);
  });
});
.bio { 
  display: none; 
  position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="anotherdiv">Another DIV</div>
<div class="bio">BIO</div>

For future reference you should always check the console when debugging JS code. You would have seen reports of the syntax issues.

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
  • Are you referring to a debugger such as an extension on google chrome – Eddie Weldon Apr 26 '17 at 18:21
  • may i suggest that if the OP has more than one `anotherdiv` on which he wants to click, he should use `.on("click",function() { ` so as to create a single handler for all the elements `anotherdiv`, not one handler for each element, which is the case for `click` – Mihai T Apr 26 '17 at 19:31
  • @MihaiT that would be pretty pointless considering `on('click', fn)` and `click()` have the exact same behaviour. – Rory McCrossan Apr 26 '17 at 19:43
  • @EddieWeldon it's not an extension, the dev console is a standard part of the browser. Either press F12, or right click an element and click 'Inspect' – Rory McCrossan Apr 26 '17 at 19:43
  • as far as i know `.on` click has better performance ( in case of multiple clicked elements ) than `click` . i researched it a while ago and also now i found this http://stackoverflow.com/questions/9122078/difference-between-onclick-vs-click – Mihai T Apr 26 '17 at 19:47
  • That's the delegated handler which is different to what you suggested. The difference is very minor though, unless you have several thousand elements in the DOM – Rory McCrossan Apr 26 '17 at 20:01
  • oh ok. i got a project rejected for this reason ( using click,bind,load instead of on ) and i had only 2 to 4 elements that were used. Well another day another thing learned. thank you for your time and explanation – Mihai T Apr 26 '17 at 20:10
  • @MihaiT whats the different between what you suggested and typing 2nd ('anotherdiv') on a new function – Eddie Weldon Apr 29 '17 at 02:32
  • also why is my question voted down. I dont know what it entails but is there anyway I can prevent it from happening – Eddie Weldon Apr 29 '17 at 02:36
0

Why not have the element hidden (with opacity 0) by default and then just add a click event to show it when document is ready, at which point you can change the opacity to 1?

$(document).ready(function() {
   $('.anotherdiv').click(function() {
      $('.bio').animate({
         left: '15em',
         opacity: 1 
      }, 2500) 
   });
});
Max Prais
  • 66
  • 6