jquery 반응 이미지 교차 페이드 전환

고정 크기의 이미지 대신이 jQuery 효과를 변환하는 방법을 아는 사람이 있습니까? 응답 할 수 있도록 크기 (너비 : 100 %, 높이 : 자동)로 크기를 설정해야합니다. 어떤 아이디어?jquery 반응 이미지 교차 페이드 전환

<script type="text/javascript"> 
$(function(){ 
    $('img.fade').each(function(){ 
     var $$ = $(this); 

     var target = $$.css('background-image').replace(/^url|[\(\)'"]/g, ''); 

     $$.wrap('<span style="position: relative;"></span>') 
      .parent() // span elements 
      .prepend('<img>') 
      .find('img:first') 
      .attr('src', target); 

     $$.css({ 
      'position' : 'absolute', 
      'left' : 0, 
      'top' : this.offsetTop 
      }); 

     $$.hover(function() { 
      $$.stop().animate({ 
       opacity: 0.2 
      }, 250); 
     }, function() { 
      $$.stop().animate({ 
       opacity: 1 
      }, 350); 
     }); 
    }); 
}); 

</script>

출처

2014-05-12 Crani0

일부 HTML을 보겠습니다. – disinfor

캔트 내 질문을 편집 할 수있는 유일한 기능은 공유이며, 나는 8 시간 만에 대답 할 수 ...이 사이트에 새로운 사람이 있기 때문에 충분한 명성을 가지고 있지 않습니까? – Crani0

편집 할 수 없다면, HTML과 JS로 [fiddle] (http://jsfiddle.net)을 시작하고 코멘트에 링크를 게시하십시오. – disinfor

나는 배경 이미지가 스케일링되지 않는다고 생각합니다. http://www.w3schools.com/cssref/css3_pr_background-size.asp

var target = $$.css('background-image').replace(/^url|[\(\)'"]/g, '').css({ 'background-size': 'cover' });

이 경우 : 당신은 "표지"또는 "포함"입니다 도움이 될 수

당신은이 문제를 해결하기 위해 CSS를 명령 "배경 크기"를 사용할 수 있습니다 ..

값 가 작동하지 않으면 배경 크기로 설정된 이미지의 실제 절대 너비를 읽을 수 있습니다. 하지만 브라우저 창 크기를 조정할 때 크기 조정 이벤트가 필요합니다.

호버에 배경 이미지를 사용하는 대신 그림을 두 개 사용하고 표시/숨기기를 권합니다.

출처

2014-05-12 16:46:14 Pixelkrieg

CSS 스타일 (fiddle : http://jsfiddle.net)으로 빠른 답장을 보내 주셔서 감사합니다./zATj6/1 /) 기본 이미지를 올바르게 표시 할 수 있지만 기본 이미지 크기로 조정할 것을 권장하지만 애니메이션이 작동하지 않을 때 배경 이미지가 전체 크기로 나타납니다. 두 가지 그림 표시/숨기기 방법이 crossfader 효과를 만드나요? – Crani0

예 jQuey-Effects "fadeIn()"및 "fadeOut"로 가능합니다. 이미지를 상자 안에 넣으면 호버 기능을 사용하여 호버 그림을 페이드 인 및 페이드 아웃 할 수 있습니다. http://jsfiddle.net/rzCx3/ – Pixelkrieg

대단히 감사합니다. 내가 필요한 것에 매우 가깝습니다. 프로젝트가 제대로 작동하는지 테스트 해 볼 것입니다. 당신이 그 결과를 알려주도록하십시오. 건배 – Crani0

jquery 반응 이미지 교차 페이드 전환

답변

관련 문제