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 bees visible from right to left in say 1 sec. In other words, animate the width from 0 to maximum value but the image should bee 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 bees visible from right to left in say 1 sec. In other words, animate the width from 0 to maximum value but the image should bee visible from left to right.

• javascript
• jquery

4 Answers 4

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);
   });  
});

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 acplish 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);
   });  
});

Here is what you want :

http://jsfiddle/rAqcP/27/

Please change the animations as you need.

~K

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)