jquery - Image animation on link hover -

jquery - Image animation on link hover -

i'm trying implement function (that part of "page" class) animates image on list item hover. i'm trying accomplish effect: http://tympanus.net/codrops/2012/01/22/how-to-spice-up-your-menu-with-css3/ here is:

linkhover : function (el) { var $link = $.find('ul.' + el.classname' li'); var $img = el; console.log($img); $($link).hover( function() { $img.stop().animate({ 'left': '300px', 'opacity': 1 }, {duration: 'slow', queue: false}); }, function() { $img.stop().animate({ 'left': '0px', 'opacity': 0 }, { duration: 'slow', queue: false}); } ); },

this throws error when hover list items:

typeerror: 'undefined' not function (evaluating 'i.stop()')

what can wrong?

thanks in advance

edit, updated

try (this pattern)

$(function() { var bg = $("ul li"); var appended = $.parsehtml("<img class=img-flip />", document, false); var page = { "linkhover" : function (el) { var link = $("ul li"); var img = $(link).find(el); console.log(link, img); // if `img` has `appended` `class` // attach `hover` `event` `el` parent (`li`) $(img).hasclass($(el)[0].classname) ? $(link).hover( function(e) { $(e.target).stop().animate({ 'left': '300px', 'opacity': 1 }, {duration: 'slow'}); }, function(e) { $(e.target).stop().animate({ 'left': '0px', 'opacity': 0 }, { duration: 'slow'}); }) && alert(link[0].nodename + "\n" + img[0].classname + " hover event ready") // if `img` _not_ has `appended` `class` // `log` `error` messages : console.log(false, link, el); // `page.linkhover` finish }}; // append `appended` `bg` // phone call `page.linkhover` // `appended` (`img`) parameter $.when($(bg).append(appended)) .then(function(link) { var elem = $(link).find("img"); alert(elem[0].nodename + " appended"); page.linkhover(elem); }, function(link) { alert("error", link) }); })

jsfiddle http://jsfiddle.net/guest271314/fnppz/

jquery hover