Slide From Right (JQuery)

Question

I have this code for sliding elements from the left.

$(".slide-left")
   .css("margin-left",-$(this).width())
   .delay(400)
   .animate({
       marginLeft:0
 }, 900);

However when I try from the right, nothing happens! It seems logical code, what I am clearly missing here?

$(".slide-right")
   .css("margin-right",-$(this).width())
   .delay(400)
   .animate({
   marginRight:0
}, 900);

it would be easier to do this by using CSS3 animations and attaching the class with jQuery — Conqueror, Oct 10 '13 at 02:09
very similar question, having an answer... http://stackoverflow.com/questions/596608/slide-right-to-left — SridharVenkat, Oct 10 '13 at 02:10
Wouldn't I lose old browser compatibility using the CSS3 animation method though? — Omar Shizzle, Oct 10 '13 at 02:10
You can use feature detection and write fallback code if you really need to support older browsers. — Conqueror, Oct 10 '13 at 02:14
Using a negative `margin-right` often doesn't work -- it's better to use a positive `margin-left` instead. — Robbie Wxyz, Oct 10 '13 at 02:23

heardy · Answer 1 · 2013-10-10T02:31:55.273

0

It's difficult to give an exact answer without the rest of the code but I would suggest using margin left to animate right as well.

$(".slide-right")
   .css("margin-left",0)
   .delay(400)
   .animate({
   marginLeft:$(this).width()
}, 900);

JS Fiddle: http://jsfiddle.net/JBgLc/1/

edited Oct 10 '13 at 02:31

answered Oct 10 '13 at 02:22

heardy

54
4

Dom · Answer 2 · 2013-10-10T02:29:40.050

margin-right only has an effect on elements surrounding or near .slide-right. Basically, you wouldn't see what's going on unless you had other elements to the right of it. However, it is important to note that this will have no effect on .slide-right itself, just the surrounding elements. This can be better understood by looking at a demo with display:inline;:

DEMO: http://jsfiddle.net/dirtyd77/74JtL/

A better way to go about this would be using right instead of margin-right, however, you would also need to use position:

$(function(){
    $(".slide-right")
   .css("right",$(this).width())
   .delay(400)
   .animate({
   right:0
}, 900);
});

DEMO: http://jsfiddle.net/dirtyd77/74JtL/2/

score 0 · Answer 3 · answered Oct 10 '13 at 02:28

Using a negative margin-right often doesn't work -- it's better to use a positive margin-left instead because the margin-right only applies to objects following: it does not affect the location of the object it is assigned to.

Use:

.css("margin-left",$(this).width())

instead of:

.css("margin-right",-$(this).width())

See this JSFiddle.

score 0 · Answer 4 · answered Oct 10 '13 at 02:33

Because the code is somewhat general, yet there is a desire for a CSS animation solution, I attached the animation using a check box instead of jQuery. You can change the direction of the slide by adding a negative to the margin-left attribute in the keyframes. I only set this up for webkit, but it can easily be extended to other browsers.

CSS:

input[type="checkbox"]:checked + .slide-right{
-webkit-animation-delay:400ms;
-webkit-animation: slider 900ms; 
}

div{
 width:50px;
 height:50px;
 border:1px solid black;
}

@-webkit-keyframes slider{
 100%{margin-left:400px;}
}

http://jsfiddle.net/rfWtD/

Slide From Right (JQuery)

4 Answers4