jQuery MarginRight not working for sliding image

Can someone explain why does marginRight on .animate() not work ?
I’ve also tried ‘margin-right’ but it doesn’t work.

	function slideImg(n) {
		if(n == 1) {
			width1 = $('.slide1 img:last-child').width();
			width2 = $('.slide2 img:last-child').width();
			$slide1.animate({marginLeft: '-=' + width1}, 1000);
			$slide2.animate({marginLeft: '-=' + width2}, 1000);
		}
		else if(n == 2) {
			width1 = $('.slide1 img:first-child').width();
			width2 = $('.slide2 img:first-child').width();
			$slide1.animate({marginRight: '-=' + width1}, 1000);
			$slide2.animate({marginRight: '-=' + width2}, 1000);
		}
}

Here is the whole code

Not 100% sure but .width() returns a unit-less pixel value so I think your missing the unit when setting the margin.

No. It works both left and right in dev tools but in practice only sliding it to the right side (marginLeft) works for some reason.

OK, I misunderstood the problem.

This is a CSS issue, not Jquery. The negative right margin is not doing what you want, the only reason the images move is that a new image is added which pushes them to the right. It has to do with how negative margins work. Negative bottom/right margin does not work like negative top/left works.

Example of negative margins

More on negative margins.

You can try using float and setting float: right when you need to use a negative right margin. Not sure if it really does what you want.

Summary
function slideImg(n) {
	if(n == 1) {
		width1 = $('.slide1 img:last-child').width();
		width2 = $('.slide2 img:last-child').width();
		$slide1.css('float', 'none');
		$slide2.css('float', 'none');
		$slide1.animate({marginLeft: '-=' + width1}, 1000);
		$slide2.animate({marginLeft: '-=' + width2}, 1000);
	}
	else if(n == 2) {
		width1 = $('.slide1 img:first-child').width();
		width2 = $('.slide2 img:first-child').width();
		$slide1.css('float', 'right');
		$slide2.css('float', 'right');
		$slide1.animate({marginRight: '-=' + width1}, 1000);
		$slide2.animate({marginRight: '-=' + width2}, 1000);
	}
}

I don’t know how I would do it with floating.

Though this works but it’s jittery. Do you maybe know how to prevent the images from moving when I prepend them because they push the others ? Like how it works with appending.

	function slideImg(n) {
		if(n == 1) {
			width1 = $('.slide1 img:last-child').width();
			width2 = $('.slide2 img:last-child').width();
			$slide1.animate({marginLeft: '-=' + width1}, 1000);
			$slide2.animate({marginLeft: '-=' + width2}, 1000);
		}
		else if(n == 2) {
			width1 = $('.slide1 img:first-child').width();
			width2 = $('.slide2 img:first-child').width();
                        // Move the margin by the witdh of the image before prepending that image
			$slide1.animate({marginLeft: '-=' + width1}, 1);
			$slide1.animate({marginLeft: '+=' + width1}, 1000);
                        // Move the margin by the witdh of the image before prepending that image
			$slide2.animate({marginLeft: '-=' + width2}, 1);
			$slide2.animate({marginLeft: '+=' + width2}, 1000);
		}
	}

Btw thanks for trying to help.

Did you try the CSS I posted? It is inside the Summary toggle.

Sorry I didn’t see that. Yeah it works. Thanks you helped me out a lot.