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.
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);
});
});
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);
});
});
Here's what you want:
http://jsfiddle.net/rAqcP/27/
Please change the animation as needed.
~ K
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
andposition: 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)