Блог

Я успешно создал меню с возможностью изменения фотографии с помощью наведения элемента списка меню. Но у меня есть проблема с добавлением эффекта затухания/затухания, когда фотографии меняются от одной к другой.

вот код:

 <div id="menu">
    <img src="menu1.jpg" alt="">
    <ul>
        <li><a data-image="menu1.jpg" href="#">Item 1</a></li>
        <li><a data-image="menu2.jpg" href="#">Another item</a></li>
        <li><a data-image="menu3.jpg" href="#">One more item</a></li>
    </ul>
</div>
<!-- /#menu -->

<script>
    var image = $('#menu').find('img').attr('src');
        $('#menu ul li a').mouseover(function() {
            var currentImage = $(this).attr('data-image');
            $(this).parent().parent().parent().find('img').attr('src', currentImage);

        });
</script>
 

Я пробовал что-то подобное, но безуспешно

 $('#menu ul li a').mouseover(function() {
    $(this).parent().parent().parent().find('img').hide().attr('src', currentImage).fadeIn(2000);
}, function () {
    $(this).parent().parent().parent().find('img').fadeOut(2000,function(){
      $(this).parent().parent().parent().attr('src', currentImage).fadeIn();
    });
});
 

Просто замените свой JS-скрипт на :

• вам нужно вызвать изображение по идентификатору или имени класса: id="loadImage"
• для выцветания сначала скройте изображение, а затем .fadeIn();

HTML:

 <div id="menu">
    <ul>
        <li><a data-image="1.jpg" href="#">Item 1</a></li>
        <li><a data-image="2.jpg" href="#">Another item</a></li>
        <li><a data-image="3.jpg" href="#">One more item</a></li>
    </ul>
    <img src="1.jpg" alt="" id="loadImage">
</div>
 

JS:

 $(document).ready(function () {
    $('#menu ul li a').on("mouseover", function() {
        var currentImage = $(this).attr('data-image');
        $("#loadImage").attr('src', currentImage).hide().fadeIn();
    });
});