Блог

Главная - Вопросы по программированию - Анимация изображения при наведении курсора на ссылку

Анимация изображения при наведении курсора на ссылку

#jquery #hover

#jquery #наведите

Вопрос:

Я пытаюсь реализовать функцию (которая является частью класса «Страница»), которая анимирует изображение при наведении курсора на элемент списка. Я пытаюсь добиться чего-то подобного этому эффекту: 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()')

Что может быть не так?

Заранее спасибо

Комментарии:

1. где и как вы вызываете функцию linkHover?

2. $link кажется неопределенным.

3. $img это не объект jquery, он должен быть var $img = $(el);

4. Я вызываю его из другой функции класса «Страницы», например: $appended = '<img src="' src '" class="img-flip" />'; $bg.append($appended); Page.linkHover($appended); Это очень неудобно, но я не эксперт по запросам.

5. Когда var $img = el; консоль. просто войдите <img ...> в систему. Когда var $img = $(el); консоль. войдите [<img src=...] в систему . При выполнении var $img = $(el)[0]; консоли. войдите img.img-flip в систему … Какой правильный?

Ответ №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'});
            }) amp;amp; 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. Спасибо. Извините за новый вопрос, но я не понимаю, как мне интегрировать его как функцию классов «Страница» и вызвать ее внутри другой функции «Страница» (которая добавляет изображения в DOM).

2. После некоторых исследований я обнаружил, что // Code 1: (function ($) { // Javascript code })(jQuery) // Code 2: var myFunction = function ($) { // Javascript code }; myFuntion(jQuery); это одно и то же. Но все еще не понимаю, как вызвать его из другой функции, когда она уже вызвана внутри себя?

Метки: