Geek Answers Handbook

Moving an image using JS / Jquery

I want to flip the image. I got css to work using:

-moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH";

I want to apply this to an image, but not sure about the formatting.

I tried to do: var flip = "-moz-transform: scaleX(-1),-o-transform: scaleX(-1),-webkit-transform: scaleX(-1),transform: scaleX(-1),filter: FlipH,-ms-filter: 'FlipH'";

And then: $("#chicken").delay(scrolllen).fadeOut(0).css({ left: 2600 + "px" , top : 2370 + "px" + flip}).fadeIn(0).animate({ left: 1600 + "px" , top : 2370 + "px"}, 5000, 'linear'); at a later point, but this does not seem to be applicable.

+3
source share
4 answers

Are you trying to do something like this?

 $('#image').mouseover(function(){ $(this).addClass('flipped'); }).mouseleave(function(){ $(this).removeClass('flipped'); });

css:

 .flipped { transform: scale(-1, 1); -moz-transform: scale(-1, 1); -webkit-transform: scale(-1, 1); -o-transform: scale(-1, 1); -khtml-transform: scale(-1, 1); -ms-transform: scale(-1, 1); }

jsFiddle here

+9
source

I would just use a class, for example:

 .flipped { -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; }

Then just replace the class:

 $("#chicken").delay(2000).fadeOut(1, function() { $(this).addClass('flipped').show() .animate({ left: 1600 + "px" , top : 2370 + "px"}, 5000, 'linear'); });

Fiddle

+3
source

I'm not quite sure that I understand what you are looking for.

I think maybe this can be done without any JavaScript at all? If you want to flip the X axis with some animation?

Hover over image

JSFiddle: Flip Image: hover

For this demonstration, I had to put the HTML image in the <div> wrapper, because otherwise the changes :hover and scale() conflict with each other in a funky way. You will understand if you remove the <div> wrapper.

HTML

 <div class="flippy"> <img src="http://lorempixel.com/200/200/"/> </div>

CSS

 .flippy>img { /**/-moz-transform:scale(1,1);-webkit-transform:scale(1,1); transform:scale(1,1); /**/-webkit-transition:all 600ms ease;-webkit-transition:all 600ms ease; transition:all 600ms ease; } .flippy:hover>img { /**/-moz-transform:scale(-1,1);-webkit-transform:scale(-1,1); transform:scale(-1,1); }

If you need to control it using JavaScript, it should be simple enough to replace :hover another class, for example .flipped , and then do it as you wish in JS to activate it on and off.

// Chase.

Inverted image on attribute (click-through demo)

jsFiddle: Rollback image by attribute

In this demo, the image is flipped when there is a flipped attribute.

JavaScript:

 // Toggles the 'flipped' attribute on the <img> tag. $('.flippy').click(function(){ if ($(this).attr('flipped')) $(this).removeAttr('flipped'); else $(this).attr('flipped','flipped'); });

CSS

 /* vendor-prefixes have been removed in this example */ /* We just change the scale based on the flipped attribute */ .flippy { transform:scale(1,1); transition:all 600ms ease; } .flippy[flipped] { transform:scale(-1,1); }

HTML: <img class="flippy" src="http://lorempixel.com/200/200/"/> - as you can see, we no longer need the <div> shell for this example, since the conflicts are: hover are no longer a problem.

// Chase.

+2
source 
 <style type="text/css"> .transform-image { -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; } </style> <script type="text/javascript"> $("#chicken").hover(function(){ $(this).addClass("transform-image") }, function () { $(this).removeClass("transform-image"); }; }) </script>
0
source

More articles:


All Articles