Question

I have some divs that I am using the JQuery .show() and .hide() functions on, however I can not get the effects/directions to change.

HTML

<li><a class="link" name="box1">HOME</a></li>
<li><a class="link" name="box2">ABOUT ME</a></li>

<div id="box1">
  SOME CONTENT
</div>

<div id="box1">
  SOME CONTENT
</div>

JavaScript

$(".link").click(function(){
    $('.container').hide();
    $('#'+$(this).attr('name')).show();   
});

Simply using .show() and .hide() appear to work. .show('slide') also works. However .show('fold') or .show('blind') does not. Nor does trying to change the direction/speed of the animation. For example:

$(".link").click(function(){
    $('.container').hide('slide', {direction:'up'}, 1000);
    $('#'+$(this).attr('name')).show('slide', {direction: 'up'}, 1000);   
});

It is important that it shows the bottom of the div first which is why im not using the .slideDown function.

Tried looking at the documentation and online tutorials but cant find out why it wont work.

Answer 1

For the ‘enhanced’ animation effects, you’ll have to include the jQuery UI library (or a specific implementation of perhaps just the animation core).

From the API page for show():

As of jQuery 1.4.3, an optional string naming an easing function may be used. Easing functions specify the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called swing, and one that progresses at a constant pace, called linear. More easing functions are available with the use of plug-ins, most notably the jQuery UI suite.

So the named animations available with ‘just’ jQuery are ‘linear’ and ‘swing.’ Including jQuery UI opens up several others (linking because it seemed pointless transcribing them).

To link to the Google-hosted jQuery UI from their CDN:

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>

References:

• Google’s CDN code library.
• show().