jQuery: Slide Left to Right

JavaScript
1

Hi,

I know how to Slide a DIV from top to bottom and vice-versa. The following code shows how to do it:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
$().ready(function(){
				   $("#clicky").click(function(){
					$("#slide").slideToggle("slow");						
											   });
				
				   });
</script>

<input name="" type="button" value="Click me" id="clicky"/>
<div id="slide">
<h1>Hello World!</h1>
</div>

Question: Is there anyway I can slide a DIV from left to right and vice-versa?

Please help.

Thanx in advance

2

John Resig, the author of jQuery, says the following:

Do you realize that you can do this now? There’s already a .animate()
function, you don’t need any of the 1.2 functionality for that.


SlideDown: .animate({ height: 'show' }); 
SlideUp: .animate({ height: 'hide }); 
SlideRight: .animate({ width: 'show' }); 
SlideLeft: .animate({ width: 'hide' });
3

We cannot have a toggle kinda thing?

4

There isn’t one built in, but it’s rather easy to create a toggle function.

Have a look at the interface fx slide code from the demo page from the [URL=“http://interface.eyecon.ro/”]interface elements plugin for jQuery

There they use the following:


if ( type == 'toggle') {
	type = z.el.css('display') == 'none' ? 'in' : 'out';
}

So you could do something very similar, just replacing in and out with the appropriate function name


function slideToggle(el) {
    var type = (el.css('display') == 'none') ? slideRight : slideLeft;
    type(el);
}
5

Hi

Thanx for your effort. Can you please post the whole code for me?

Thanx in advance

6

Here is a sample implementation:


<p><a class="toggleWidth" href="#">Toggle width</a></p> 
<div id="homeTown"> 
    My home town
    <img src="http://tbn2.google.com/images?q=tbn:XuAWyjom5m2VYM:http://www.dementad.com/Reception/images/christchurch.jpg"> 
    <a href="http://www.dementad.com/Reception/images/christchurch.jpg">Christchurch</a> 
</div>



jQuery('.toggleWidth').click(function () {
	jQuery('#homeTown').slideToggleWidth();
});

jQuery.fn.extend({
  slideRight: function() {
    return this.each(function() {
      jQuery(this).animate({width: 'show'});
    });
  },
  slideLeft: function() {
    return this.each(function() {
      jQuery(this).animate({width: 'hide'});
    });
  },
  slideToggleWidth: function() {
    return this.each(function() {
      var el = jQuery(this);
      if (el.css('display') == 'none') {
        el.slideRight();
      } else {
        el.slideLeft();
      }
    });
  }
});
7

@Paul - how come you’re using the jQuery keyword? Why not enclose the whole block in a function scope, feed jQuery and reference it using $ inside of the function? Or is it just a preference, in that you don’t think $ is semantic, etc?

8

Yes, it could be enclosed in a function scope, such as this:


jQuery(function () {
    ...
});

But that wasn’t the purpose of the code snippet that was provided.
The code would be used with other jQuery code, so in much the same way that we tend not to show html and head tags when showing html snippets, it doesn’t seem appropriate to show all of the complete details when showing jQuery snippets.

As to why jQuery is being used instead of $, there was a recent discussion in another thread about the use of $ and how it can be confusing with the wide range of other libraries that also use it.

So, in order to aid in a lessoning of confusion, and to make things easier should the need to make it cross-compatable with other libraries occur, I’m using the same techniques here that plugin authors use.

Think of it this way, $() is the lazy way which makes several assumptions that can and will quite easily break its own functionality. jQuery() ensures that things work well with little chance for things to go wrong.

9

great code snippet, i am now trying to use it to create a sort of menu that goes out to the right when mouseover is triggered, and it should close on mouseout of the whole area.

This is my code snippet, where container is the whole area including the menu, so when the mouse leaves “container” the menu should close.

It doesnt work however; the “menu” closes as soon as the mouse leaves the “toggle width” link…which of course means the user have no chance at clicking “link1” and “link2”

what am i doing wrong?


<div id="container" style="background-color: #ffff00;">

<p><a class="toggleWidth" href="#">Toggle width</a></p>

<div id="homeTown" style="display: none;">
    <nobr>
    some menu sort of
    <a href="asdasd">link 1</a> -
    <a href="asdasd">link 2</a>
    </nobr>
</div>

</div>

<script>
    jQuery('.toggleWidth').mouseover(function () {
    jQuery('#homeTown').slideRight();
});

    jQuery('#container').mouseout(function () {
    jQuery('#homeTown').slideLeft();
});

jQuery.fn.extend({
  slideRight: function() {
    return this.each(function() {
      jQuery(this).animate({width: 'show'});
    });
  },
  slideLeft: function() {
    return this.each(function() {
      jQuery(this).animate({width: 'hide'});
    });
  },
  slideToggleWidth: function() {
    return this.each(function() {
      var el = jQuery(this);
      if (el.css('display') == 'none') {
        el.slideRight();
      } else {
        el.slideLeft();
      }
    });
  }
});
    </script>
10

found it, if i use mouseleave instead of mouseout it works.