CODEWITHSUNDEEP
javascriptjquery
Bobby Francis Joseph
Bobby Francis Joseph

Reputation: 600

jQuery animation - making an image visible from left to right

I am trying to make an image hidden hidden using jQuery. I am using .hide() function. I am applying it to div containing the image which has to be hidden. Its not working for some reason. I have created a fiddle.

Is it possible to use animate so that the image becomes visible from right to left in say 1 sec. In other words, animate the width from 0 to maximum value but the image should become visible from left to right.

Upvotes: 3

Views: 4357

Answers (4)

Didier Ghys
Didier Ghys

Reputation: 30676

I don't think you should animate the width because the image will look weird when resized.

You can achieve what you want like this:

  • set the container (the DIV#myimage) to overflow: hidden and position: relative: hiding the overflow will allow to move the image to the left out of the container
  • set the image to position: absolute and move the image to the left to hide it
  • animate the left property back to zero

DEMO

DEMO (initial state with css)

Upvotes: 1

Kunal Vashist
Kunal Vashist

Reputation: 2471

You were not using the correct syntax.missing ); at the end of each function

$(document).ready(function() {
  $('#animate').click(function() {
      $('#myimage').animate({width: 'hide'},1000);
   });  
});

Upvotes: 2

metalfight - user868766
metalfight - user868766

Reputation: 2750

Here is what you want :

http://jsfiddle.net/rAqcP/27/

Please change the animations as you need.

~K

Upvotes: 1

Nikola Anusev
Nikola Anusev

Reputation: 7088

You can find the working jsFiddle here.

Couple of points:

  • In your original fiddle, you forgot to use the terminating ) - that's why the hiding did not work.
  • To accomplish the animation, I've used the blind jQuery easing. To use this (and other easings), you need to reference the jQuery UI library (as I am doing in the fiddle). Took me a while to figure out why the effect does not work till I ticked that little checkbox on the left :)

Just for the record, I am also posting the code from the fiddle:

$(document).ready(function() {
  $('#animate').click(function() {
      $('#myimage').toggle('blind', { direction: 'horizontal' }, 1000);
   });  
});

Upvotes: 1

Related Questions