Member Avatar for canterorist

hi! I would like to know how to use jquery in sliding left to right?

Can you give me simple sample there..

thanks in advance.

  • 2 Contributors
  • 6 Replies
  • 208 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by canterorist

Dani AI

Generated

As pointed out, jQuery’s built‑in slide helpers animate height only. Horizontal motion is typically done with .animate or — for better performance and smoother results — with CSS transforms and a class toggle. The Post #4 example works conceptually, but it uses the old event-style .toggle(fn,fn) shorthand (removed in modern jQuery); replace that with a click handler and an explicit state or a class toggle.

A recommended, performant pattern: move the element with CSS transforms and flip a class from jQuery. Transforms avoid layout thrash and are GPU-accelerated in most browsers.

/* CSS */
.panel { position: absolute; left: 0; top: 0; transform: translateX(-100%); transition: transform 300ms ease; }
.panel.open { transform: translateX(0); }

/* jQuery */
$('.trigger').on('click', function(){
  $('.panel').toggleClass('open');
});

If business logic requires jQuery-driven numeric animation (width/left), ensure the animated element is positioned (relative/absolute), its wrapper uses overflow: hidden, and call .stop(true,true) before .animate() to avoid queued animations. Use a class or .hasClass('open') to track state instead of the deprecated .toggle(fn).

/* jQuery fallback */
$('.trigger').on('click', function(){
  var $p = $('.panel');
  $p.stop(true, true);
  if ($p.hasClass('open')) {
    $p.animate({ left: '-220px' }, 300, function(){ $p.removeClass('open'); });
  } else {
    $p.animate({ left: '0' }, 300, function(){ $p.addClass('open'); });
  }
});

Troubleshooting notes: to animate to an “auto” width, measure the element’s natural width first; after hiding, set display:none/aria-hidden if it should be removed from assistive tech. For mobile and complex layouts prefer the CSS transform approach for smoother, less CPU-intensive motion. Credit to for the original suggestions and for confirming the solution worked in this thread.

Recommended Answers

All 6 Replies

Member Avatar for bvelez352

the slide function in jQuery won't allow you to slide horizontally, only veritcally.. to slide horizontally you must use the animate function

let's say you have a link and when you click it you want an image that is a child of the <a> tag to toggle slide.. here is how you would code it

$(function(){
	$('a').click(function(){
		$(this).find('img').slideToggle();
	});
});

since you can't have two functions on click you have to put slideToggle which is the same as slideDown and slideUp but in one fuction....

here is a link to a blog post i wrote that will help you make a dropdown menu using slideDown and slideUp on hover

hope this'll help you

Edited by bvelez352 because: n/a
Member Avatar for canterorist

thanks bvelez352 for your sample code. I really appreciate it, but do you have sample code in animate function?
thanks in advance

Member Avatar for bvelez352

Sure.

Let's say you have a div that when you click a link you want the width to toggle from 0 to 150px with an animate function

here

$(function(){
	$('div.divClass').css({
		'width':'0'
	});
	$('a.className').toggle(function(){
		$('div.divClass').animate({
			'width':'150px'
		});
	});
});

i wrote this from the top of my head, so if you get any problem, let me know.

Member Avatar for canterorist

thank you bvelez352 for your time in giving me a sample code. I will try this at home.

Member Avatar for bvelez352

no problem, let me know if you have any more questions.

Member Avatar for canterorist

sorry for late reply. Now! i really know how to use it. thanks

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.