Clever Geek Handbook

JQuery animation - making an image visible from left to right

I am trying to make a hidden hidden image using jQuery. I am using a function .hide()

. I am applying it to a div containing an image that needs to be hidden. For some reason it doesn't work. I created a violin .

Is it possible to use animate

to make the image visible from right to left, say 1 sec. In other words, animate the width from 0 to its maximum value, but the image should be visible from left to right.

+3


source to share


4 answers


You didn't use the correct .missing syntax); at the end of each function



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


source


You can find a working jsFiddle here.

A couple of points:

  • In your original fiddle, you forgot to use the trailing one )

    - which is why hiding didn't work.
  • To complete the animation, I used blind jQuery easing. To use this (and other mitigations) you need to refer to the jQuery UI library (as I do in a fiddle). It took a while to figure out why the effect was not working until I checked this little checkbox on the left.


Just for the record, I also post the code from the scripts:

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


source


Here's what you want:

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

Please change the animation as needed.

~ K

+1


source


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

You can achieve what you want:

  • set container (DIV # myimage) to overflow: hidden

    and position: relative

    : hiding the overflow will move the image to the left of the container.
  • set the image to position: absolute

    and move the image to the left to hide it.
  • animate property left

    to zero

DEMO

DEMO (initial state with css)

+1


source






More articles:


All Articles