CODEWITHSUNDEEP
jquerycsshoverjquery-animate
Sam Skirrow
Sam Skirrow

Reputation: 3697

jQuery animate not working on hover

Pulling my hair out over this, seems simple but for whatever reason isn't working.

I'm trying to animate a div container within an element when you hover over the parent element using jquery.

The idea is, when you hover over the parent, the child div slides down, and when you hover out it moves back to it's original position.

Here is my html markup:

<article class="skizzar_masonry_entry " style="position: absolute; left: 0px; top: 0px;">

<a class="skizzar_ma_fancybox clickable" href="http://www.skizzar.com/paulthefunkydrummer/files/2015/01/paul_jones_drummer_gallery_16-683x1024.jpg">
    <i class="skizzar_ma_overlay fa fa-search" style="top: 0px;"></i>
    <img alt="Paul Jones" src="http://www.skizzar.com/paulthefunkydrummer/files/2015/01/paul_jones_drummer_gallery_16-683x1024.jpg"></img>
</a>

</article>

and my jQuery:

$(".skizzar_masonry_entry").hover(function(){
$('.skizzar_ma_overlay', this).animate({'top': '100px'}, 400, 'easeOutExpo');
}, function(){
$('.skizzar_ma_overlay', this).animate({'top': '0'}, 400, 'easeOutExpo');
});

Here is a jsfiddle showing my work: http://jsfiddle.net/h3sqe9re/

Upvotes: 2

Views: 530

Answers (3)

Simeon
Simeon

Reputation: 1

It doesn't require js at all. I used css to make hover effect.

Set the fixed height for the hidden div then remove that height, while hovering on the top most of the div. (i.e Hovering on the whole div) .

http://jsfiddle.net/simeon1929/h3sqe9re/14/

Upvotes: 0

Rhumborl
Rhumborl

Reputation: 16609

If you check your console, you will see an error that undefined is not a function at jQuery.easing[ this.easing ]().

Basically the easing method you have defined easeOutExpo is not available in the core jQuery library - it is part of jQuery UI.

Adding jQuery UI (https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js) to your fiddle makes this work

Updated Fiddle

Upvotes: 0

Ciccolina
Ciccolina

Reputation: 514

You need to include jQuery-UI for custom transitions. easeOutExpo isn't included in jQuery core library.

working demo

Easing

The remaining parameter of .animate() is a string naming an easing function to use. An easing function specifies the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called swing, and one that progresses at a constant pace, called linear. More easing functions are available with the use of plug-ins, most notably the jQuery UI suite.

Upvotes: 1

Related Questions