jQuery 호버 이미지 페이드 스왑

StackOverflow https://stackoverflow.com/questions/1857827

  •  13-09-2019
  •  | 
  •  

문제

나는 온라인에서 잠시 동안 검색하고 있으며,이 간단한 작업을 수행하는 jQuery 스크립트를 작성하는 가장 좋은 방법을 찾으려고 노력했습니다. 우아한 페이드 효과로 호버에서 이미지를 교체했습니다. 나는 많은 해결책을 찾았고 (번거롭고 어리석은 방법), 내가 가장 잘 보는 것까지 좁혔습니다.

http://designwoop.com/2009/08/image-hover-effect-using-jquery-tutorial/

http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/

내 목적을 위해, 나는이 호버 스왑을 한 페이지에 여러 번 할 수 있기를 원합니다. 페이지는입니다 http://www.vitaminjdesign.com. 나는 현재 "Services Nav"(다른 유형의 호버)에 호버를 가지고 있지만 바닥 글의 소셜 아이콘뿐만 아니라 모든 NAV 버튼에 적용하고 싶습니다. 모든 호버는 동일하게 두 개의 이미지 파일이 될 것입니다. 이것에 대해 가장 좋은 방법은 무엇입니까? 위의 링크 중 하나일까요?

도움이 되었습니까?

해결책

단일 배경 이미지를 사용하여이를 달성하고 투명한 Div를 퇴치하고 퇴역시킬 수 있습니다. 다음은 단일 클래스의 이미지에 대해 자동으로 작동하도록 확장 될 수있는 빠른 예입니다.

$(document).ready( function() {
    $("#mask-div")
        .css({
          "position": "absolute",
          "width": 275,
          "height": 110,
          "background": "rgba(255, 255, 255, 0.5)"
        })
        .mouseover( function() {
             $(this).fadeOut("slow");
        })
    ;
    $("#test-img").mouseout( function() {
        $("#mask-div").fadeIn("slow");
    });
});

jsbin에서 실행되는 데모를 볼 수 있습니다. 데모 온

업데이트 : 여기에보다 일반적인 솔루션이 있습니다 (불완전하지만 일부 아이디어를 보여줍니다). 데모 2 . 이 효과를 원하는 이미지에 "Fade-Img"클래스를 추가하십시오.

$(document).ready( function() { 
    $(".fade-img") 
        .before("<div class='fade-div'></div>") 
        .each( function() { 
            var img = $(this); 
            var prev = img.prev(); 
            var pos = img.offset(); 

            prev.css({ "height": img.height(), "width": img.width(), "top": pos.top, "left": pos.left }) 
                .mouseover( function() { 
                    $(this).fadeOut("slow"); 
                } 
            ); 
        }) 
        .mouseout( function() { 
            $(this).prev().fadeIn("slow"); 
        }) 
    ; 
});

다른 팁

제공 한 두 번째 링크에서 솔루션을 선택합니다. 짧고 깨끗하며 간단합니다.

  • 두 개를 만듭니다 <img> 태그
  • 하나를 다른 하나에 정확하게 배치하십시오 (CSS z-index)
  • 호버에서 이미지의 불투명도가 더 높아 z-index 에게 0
  • 이것은 투명하게 만들고 기본 이미지를 볼 수 있습니다.
  • 호버가 끝나면 불투명도가 희미 해집니다 1 다시.

완료

내부에 $(document).ready()

$('.imgbuttonclass').hover(function(){
    $(this).animate({
        backgroundImage: 'img2.png'
    },500);
},function(){
    $(this).stop(true).animate({
        backgroundImage: 'img1.png'
    },500);
});

편집하다

이 작업 만하려면 : http://designwoop.com/2009/08/image-hover-effect-using-jquery-tutorial/

그런 다음 Jthompson의 답변을 사용하거나 해당 페이지에서 코드를 사용하십시오. 두 개의 별도 이미지를 사용하려면 다음을 살펴 보겠습니다.

http://peps.ca/blog/easy-image-rollover-script-with-jquery/

그리고 데모

그것이하는 일입니다

"RO"클래스가있는 "IMG"또는 "Input"태그에 대한 문서를 살펴 봅니다. 롤오버 이미지의 이름은 일반 이미지와 동일하지만 끝에 "_o"로 명명되어야합니다. 예를 들어, "image.gif"의 롤오버 이미지는 "image_o.gif"입니다. 모든 이미지 태그를 찾은 후 스크립트는 모든 롤오버 이미지와 광고를 "마우스 오버"및 "마우스 아웃"이벤트를 예방합니다.

jQuery로 이미지 크로스 페이드 전환 이것에 접근하는 몇 가지 방법을 설명합니다 ..

CSS 스프라이트를 사용하여 효과를 달성하기 때문에 이것이 최선의 방법이라고 생각합니다. 튜토리얼과 데모는 CSS3 및 jQuery를 사용하여이를 달성하는 방법을 보여줍니다. 아래에서 확인하십시오.

http://css-tricks.com/fade-image-within-sprite/

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top