HTML 데이터가있는 다른 요소의 마우스를 놓을 때 배경 이미지를 어떻게 페이드 아웃하는가?

Question

사용자가 앵커 태그를 가리키면 부모 div가 특정 배경에서 사라지게 효과를 얻으려고합니다. 다른 앵커). 내가 얻는 결과는 괜찮지 만, 내가 원했던만큼 부드럽 지 않다. https://jsfiddle.net/GJL2K/8cwcdthe/6/ 여기

는 자바 스크립트입니다 : 여기

는 jsfiddle 링크입니다

$(function() { 
    $('.description').hide(); 
    $('.page-right li a').on('mouseenter', function(event) { 
      // console.log(this); 
      event.stopPropagation(); 

      var $background = "url('" + $(this).attr('data-background') + "')"; 

      $(this).parents('.page-right') 
       .find('#back') 
       .stop() 
       .animate({opacity: .5}, 0) 
       .css({'background': $background}) 
       .animate({opacity: .75}, 1000); 
    }); 

    // $('.page-right li a').on('mouseleave', function(event) { 
    //  $('.description').slideUp(); 
    //  // console.log(this); 
    //  event.stopPropagation(); 
    //      
    //  $(this).parents('.page-right').find('#back') 
    //   .stop 
    //   .animate({opacity: .5}, 0) 
    //   .css({'background': 'none'}) 
    //   .animate({opacity: 1}, 1000, 'easeInQuad', 
    //    function() {$('.description').slideUp(); 
    //  });  
    // }); 

    $('.page-right li a').on('click', function(event) { 
      event.preventDefault(); 
      $(this).parent().next().slideToggle('fast'); 
    }); 
}); 

문제는 다음 링크를 통해 마우스를 가져 가면, 첫 번째 배경이 사라하고, 다음 하나는 점프 그 장소. 다음 배경이 사라지기 전에 첫 번째 배경이 희미 해지면 좋겠지 만 댓글이 달린 코드에서 볼 수 있듯이 mouseleave 이벤트를 파악하지 못했습니다.

다른 코드를 살펴본 결과 잘못된 길로 갔을 수도 있습니다. 차라리 더 부드러운 전환으로 보이는 fadeOut/fadeIn 효과가 있지만 두 개의 배경 이미지에서만 작동하는 것을 보았습니다. 필요한 모든 이미지가 아닌 것입니다.

이 이미지 전환을보다 부드럽고 매끄럽게하려면 어떻게해야합니까?

Answer 1

내가 제공 한 것을 사용하여 이미지간에 더 부드럽게 애니메이션을 적용 할 수있었습니다. 여기에 mouseenter 핸들러의 다음 fadeOut 통화가 배경 스왑을 시작하고 해당 fadeIn를 시작하는 콜백을 사용

$('.page-right li a').on('mouseenter', function(event) { 
    // console.log(this); 
    event.stopPropagation(); 

    var $background = "url('" + $(this).attr('data-background') + "')"; 
    var $element = $(this) 
     .parents('.page-right') 
     .find('#back') 
     .stop(); 

    $element.fadeOut(500, function() { 
     $element 
      .css({'background': $background}) 
      .fadeIn(500); 
    }); 
}); 

공지있다. animate 호출이 비동기 적이기 때문에 이전 코드는 애니메이션 중에 배경을 대체하기 만했기 때문에 전환이 원활하지 않았습니다. 이것은 훨씬 부드럽습니다.

실무 jsFiddle

는 여기에서 찾을 수 있습니다 : https://jsfiddle.net/mgaskill/29tjauov/

은 물론, 추가 개선이 특히 훌륭한 후속 질문이 될 것입니다 사전로드 이미지로, 만들어 질 수있다.