JQuery / Javascript миниатюрное изображение проблемы - PullRequest
Новая
       28

JQuery / Javascript миниатюрное изображение проблемы

0 голосов
/ 04 августа 2011

У меня есть несколько миниатюрных изображений, которые расположены на расстоянии 5 пикселей друг от друга в тегах списка HTML. У меня также есть слушатели Jquery для событий mouseenter и mouseleave, которые обновляют родительское изображение в зависимости от того, какая миниатюра переворачивается.

Если вы прокрутите от одного миниатюрного изображения до другого, переход не будет плавным. Когда мышь находится в 5-пиксельном интервале, родительское изображение быстро переходит к значению по умолчанию, а затем возвращается к следующему уменьшенному изображению, когда курсор перемещается над ним.

Как сделать так, чтобы это плавно переходило от изображения к изображению, не возвращаясь к исходному изображению по умолчанию.

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

Спасибо!

EDIT. -> запрос кода 

$image_changer = $('.imageChanger');
$image_changer.each(function(){
$(this).mouseenter(function(){
    $backup_old_image = $('.product-img-box .product-image img').attr('src');
    $('.product-img-box .product-image img').attr('src', $(this).attr('src'));
});
});
$image_changer.mouseleave(function(){
    $('.product-img-box .product-image img').attr('src', $backup_old_image);
});

Пример на странице товара .. http://www.greencupboards.com/loyal-luxe-the-canadian-cabin-15706.html

1 Ответ

1 голос
/ 04 августа 2011

используйте оболочку или поместите триггеры padding и mouseover на элемент li 

<li style="padding:5px">
   <img href="content.png" alt="content">
</li>



$("li").hover(function(){},function(){})

Редактировать

После просмотра сайта:

измените 

#main-content .more-views ul li {
  float: left;
}

на 

#main-content .more-views ul li {
  padding-right: 5px;
  float: left;
}

и избавьтесь от поля справа на изображениях.

затем измените jQuery на

$image_changer = jQuery('.more-views li');
$image_changer.each(function(){
jQuery(this).mouseenter(function(){
    $backup_old_image = jQuery('.product-img-box .product-image img').attr('src');
    jQuery('.product-img-box .product-image img').attr('src', jQuery(this).find("img").attr('src'));
});
});
$image_changer.mouseleave(function(){
    jQuery('.product-img-box .product-image img').attr('src', $backup_old_image);
});
...