jQuery : 호버의 크로스 페이딩 이미지

Question

나는 두 가지 이미지에 영향을 줄 '페이드에'스크립트를 구현하려고 노력하고 있습니다.

<script type="text/javascript">

  $(document).ready(function(){

        $('img').mouseover( function() {

              $(this).fadeOut(200, function() {

                    $(this).attr({'src':'http://example/images/image.png'});

               if (this.complete) $(this).fadeIn(500);

              });
        });

  });

</script>

이 jQuery는 다음과 같이합니다.

1- 먼저 이미지가 사라지고 사라집니다. 2- 빈 공간에서 새로운 공간에서 새로운 공간이 나타납니다.

그래서 나는 실제 '페이드에'효과를 얻기 위해 스크립트를 개선하고 싶습니다.

지금까지 탐구해온 두 가지 훌륭한 자원이 있습니다.

• 사이클 플러그인 - 매우 멋지다 (나는 그 사이클 효과를 호버에게 얻으려고 노력할 것이다)
• 디자이너를위한 jQuery 시원하지만 IE (Fadein의 이상한 검은 색 픽셀 화 테두리)에 많은 문제가있었습니다.

누군가가 최종 추가 솔루션을 지적 할 수 있다면 대단히 감사합니다.

1 월

편집하다 : CSS 트릭/솔루션은 여기에 있습니다 http://paragraphe.org/stackoverflowdemos/crossfade-images/

Answer 1

최근에 나는 CSS 중심 솔루션을 발견했습니다. 이미지를 "Over"Oner Oner "로 배치하고, 문서에 jQuery가 0으로 페이딩하고, 마우스 아웃에서 마우스 오버 / 페이드에서 다시 0으로 페이드로 페이드.

Answer 2

원래 페이드에 대한 콜백으로서 두 번째 페이드를 부르는 방식은 그들이 다른쪽에 실행되도록 보장 할 것입니다.

이것에 더 많은 운이있을 수 있습니다

$('img').mouseover( function() {
          $(this).fadeOut(200);
          $(this).attr({'src':'http://example/images/image.png'});
          if (this.complete) $(this).fadeIn(500);
        });

어딘가에 사전로드되지 않으면 두 번째 이미지의 로딩 시간의 변덕에 여전히있을 것입니다.

Answer 3

이것은 일종의 긴 수정이지만, 부드러운 페이드를 얻기 위해 내가하는 일입니다. 나는 페이드 아웃을 사용한 다음 콜백으로 $ .ajax를 사용하여 실제로 새 이미지를로드 한 다음 성공을 사용합니다. in.

다음은 PHP 파일을로드하는 예입니다. 원리는 이미지와 동일합니다.

$("#leftbar").fadeOut("normal", function() {
$.ajax({
    url: "bin/leftBar.php",
    cache: "false",
    success: function(data) {
        $("#leftbar").html(data);
    },
    complete: function() {
        $("#leftbar").fadeIn("normal");
    }
});