Блог

Я уверен, что это очень простой вопрос, но сложно выбрать точный элемент, для которого мне нужно запустить анимацию ()…

http://jmldirect.uat.venda.com/uk/cleaning/shark-steam-cleaning/icat/4fsharksteam

Красные метки, расположенные на изображениях продуктов, перемещаются влево в переполнение и скрываются. Но ближайший элемент, который я мог бы использовать для использования в методе hover (), это:

 #productList ul.gridStyle li
 

Не идеально, поскольку каждый элемент li представляет собой весь список, а не только изображение, что является идеальным.
Я тоже пробовал это, но безуспешно:

 #productList ul.gridStyle li img
.prods .image img
jQuery('#productList ul.gridStyle li').children('img')
 

Поскольку изображения генерируются с использованием формы, я подозреваю, что это дает некоторый контекст относительно того, почему это не так просто?

Обновить:

Решил, что правильный селектор для использования — это:

 #productList ul.gridStyle li .moredetail img
 

но запуск этого в функции ничего не делает:

 jQuery(document).ready(function() {
    jQuery('#productList ul.gridStyle li .moredetail img').hover(function () { //fired the first time
         jQuery('#red-tag-area img', this).animate({ "left": "-=80px" }, "slow" );
        }, 

        function () { // fired the second time 
                jQuery('#red-tag-area img',this).animate({ "left": " =80px" }, "slow" );
            });
});
 

Это должно сработать:

 jQuery(document).ready(function() {
    jQuery('#productList ul.gridStyle li .moredetail img').hover(function () { 
        jQuery(this).closest("form").siblings("#red-tag-area").find("img").animate({"left": "-=80px" }, "slow" );
    }, 

    function () { 
        jQuery(this).closest("form").siblings("#red-tag-area").find("img").animate({ "left": " =80px" }, "slow" );
    });
});