Question

我试图实现一个函数（这是＆＃34; Page＆＃34;类的一部分），它会动画列表项悬停上的图像。我试图达到这样的效果：http://tympanus.net/codrops/2012/01/22/how-to-spice-up-your-menu-with-css3/ 这是：

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});
        }
        );

    },

当我将鼠标悬停在列表项上时会抛出错误：

TypeError: 'undefined' is not a function (evaluating 'i.stop()')

有什么不对？

提前致谢

Answer 1

修改，更新

尝试（此模式）

   $(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` to `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` complete
        }};
            // append `appended` to `bg`
            // call `Page.linkHover` with
            // `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/

链接悬停时的图像动画

1 个答案: