Slow transition to hover state with Javascript

Question

I am working on css in which when mouse hovers on images, it gets bigger. e.g.

#image-div img { width:100px; height:100px;}
#image-div:hover img { width:200px; height:200px;}

Now i want it to be animated a little. Like it shall zoom in slowly, and on mouse out, it shall zoom out slowly. Please help.

Note: I am not very well familiar with javascript.

score 2 · Accepted Answer · edited May 23 '17 at 12:19

These animations are typically done with Javascript. Rather than writing the Javascript by hand, it is probably easier to use the jQuery library, which includes the ".animate()" method. The animate method requires you give the destination css properties as parameters, like so:

(Since you wrote you are not familiar with Javascript, I've included everything you need to include the jQuery library)

<script src="http://www.google.com/jsapi" type="text/javascript"></script>

<script type="text/javascript">google.load("jquery", "1.6.4");</script>

<script type="text/javascript">

    $(document).ready(function(){

        $("#image-div img").live({mouseenter:myfin,
              mouseleave:myfout});

    });
    function myfin () {
    $(this).animate({height: 200, width: 200},1000); //1000 = 1 second animation
}
function myfout () {
    $(this).animate({height: '', width: ''},1000); //1000 = 1 second animation
    //setting the height and width to '' will clear the inserted style, leaving you with your original style
}
</script>

Then all you should need is to set the height and width to 100px in your CSS, and remove the #image-div:hover definition.

If you would like to animate using class definitions in your CSS file, you can do so using a jQuery plug-in. See the following question for help on that:

jQuery.animate() with css class only, without explicit styles

Thats perfect brother. Wonderful. Thanks alot. Marking your answer. — themajiks, Oct 14 '11 at 07:17
There is one more problem. If you hover over, and mouse out 10 times quickly, it will complete its circle of 10 times. The only problem. — themajiks, Oct 14 '11 at 07:21
Try this: $("#image-div img:not(:animated)").live({mouseenter:myfin, mouseleave:myfout}); — Ryan Rapp, Oct 14 '11 at 07:59

score 2 · Answer 2 · answered Oct 14 '11 at 06:33

If you don't need to support older browsers you could use the CSS3 transition attribute. It does not require any javascript and works on Safari, Firefox, and Opera. http://www.w3schools.com/css3/css3_transitions.asp

#image-div img {
    width:100px;
    height:100px;
    transition:all 1s ease-in-out
    -moz-transition:all 1s ease-in-out;
    -webkit-transition:all 1s ease-in-out;
    -o-transition:all 1s ease-in-out;
}
#image-div:hover img {
    width:200px;
    height:200px;
}

Yes. I have done that, but somehow, my client needs the animation to work in older browsers too. — themajiks, Oct 14 '11 at 07:16

score 0 · Answer 3 · answered Oct 14 '11 at 05:41

0

Look into the .animate() method and pair it with .hover(). This will allow you to apply a specific transition when the mouse is hovered over a specific element, in this case zoom, as desired.

answered Oct 14 '11 at 05:41

Robert

8,717
2
27
34

Slow transition to hover state with Javascript

3 Answers3