подкачка изображений при наведении jquery с использованием 2 изображений в одном div

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

Я пытаюсь использовать платформу Shopify для небольшого коммерческого сайта. У меня есть большая часть сайта, однако на моей главной странице коллекции я хочу иметь эффект наведения изображения для передней / задней части элемента. В настоящее время мой html выводится следующим образом с первым и вторым элементом в списке продуктов в div. Это работает вроде. По сути, я хочу, чтобы изображение исчезало при загрузке страницы, а при наведении курсора на fadeout затем исчезало на втором изображении в div, при наведении курсора листья возвращаются к исходному изображению.

.html

 <div class="image">
  <a href="{{ product.url | within: collection }}">
    <img src="{{ product.featured_image.src | product_img_url: 'large' }}" alt="{{ product.featured_image.alt | escape }}"class="img-responsive collectionItem">
    <img src="{{ product.images[1] | product_img_url: 'large' }}" alt="{{ product.title | escape  }}"   class="img-responsive collectionItem" style="display:none"/>
  </a>
</div>

.js

 $('.collectionItem').hover(function() {
    $(this).fadeOut();
    $(this).next('img').stop(true, true).fadeIn('slow');
        }, function() {
    $(this).next('img').fadeOut();
    $(this).stop(true, true).fadeIn('slow');
});

1. Примечание: повторение $(this) селекторов — пустая трата времени на обработку. Используйте локальную переменную (при минимизации код также короче в качестве бонуса).

2. планировал это, как только я понял, что лучший способ правильно исчезать и исчезать без мерцания

Ответ №1:

JSFiddle: http://jsfiddle.net/TrueBlueAussie/49fpX/1 /

Вам нужно связать fade out и fade in , чтобы избежать странных результатов. Также обычно лучше поместить указатель мыши на элемент, который будет существовать все время, поскольку некоторые браузеры делают странные вещи, когда элемент наведения исчезает:

 function swapImg($container) {
    var $image = $container.find('img:visible');
    var $image2 = $image.siblings();
    $image.stop().fadeOut(function(){
        $image2.stop().fadeIn();
    });
}
$('.image').hover(function () {
    swapImg($(this));
}, function () {
    swapImg($(this));
});