fadeout 효과가있는 jquery 애니메이션 사용

다음을 수행해야하는 jQuery를 만들었습니다. div 안에 마우스를 가져 가면 내용이 왼쪽 또는 위쪽으로 움직이며 mouseout에서 0px로 돌아오고 사라지다.fadeout 효과가있는 jquery 애니메이션 사용

나는 그것을 할 수 있었지만 그것이 마우스 아웃이되면 부드럽게 움직이지 않는다.

$(document).ready(function() { 
    $(".button").hover(function() { 
     $(this).find(".le").css("display", "block"); 
     $(this).find('.h1').animate({ 
      left: '-300px', 
      top: '130px' 
     }, { 
      queue: false, 
      duration: 500 
     }); 
     $(this).find('.h2').animate({ 
      left: '80px' 
     }, { 
      queue: false, 
      duration: 500 
     }); 
     $(this).find('.h3').animate({ 
      top: '130px' 
     }, { 
      queue: false, 
      duration: 500 
     }); 
    }, 
    function() { 
     $(this).find('.h2').animate({ 
      left: '0px' 
     }, { 
      queue: false, 
      duration: 500 
     }); 
     $(this).find('.h3').animate({ 
      top: '0px' 
     }, { 
      queue: false, 
      duration: 500 
     }); 
     $(this).find(".h1").animate({ 
      left: '0px', 
      top: '0' 
     }, "normal", function() { 
      setTimeout(function() { 
       $('.le').fadeOut('fast'); 
      }, 0, { 
       queue: false, 
       duration: 500 
      }); 
     }); 
    }); 
});

HTML

<div style="background:#98bf21;height:200px;width:200px; margin:0 auto;" class="button"> 
<div class="h1 le" style="background:#CCCCCC; display:none; position:relative"> 
<img src="http://b.vimeocdn.com/ps/797/797108_300.jpg" width="300" height="300" border="0" alt="" /></div> 
<div class="h2 le" style="background:#FF0000; display:none; position:relative">Responsive</div> 
<div class="h3 le" style="background:#00FF00; display:none; position:relative">View</div>

출처

2012-06-15 Linel Sedillo

Chrome에서 원활하게 실행됩니다. 어떤 브라우저를 사용하고 있습니까? –

@ ChristopherRamírez : Chrome에 있습니다. 나는 문제를 보지만 미묘한 문제를 본다. 웃는 div는 페이드 아웃하기 전에 점프하는 것처럼 보입니다. –

이 보이는 시각적 효과는 대조적으로 발생되는 : 여기

http://jsfiddle.net/AufTr/ 내 코드입니다 : 여기

내 바이올린의사이배경색 - 녹색 및 이미지의 배경색 - 흰색 -.

브라우저가 애니메이션 렌더링 엔진이 아니라는 점을 고려하십시오. Firefox는 Chrome보다 훨씬 느립니다. 따라서 Chrome에서 애니메이션을 원활하게 실행하더라도, 다른 브라우저 또는 느린 컴퓨터에서는 원활하게 처리됩니다.

.button의 background-color을 흰색으로 변경하십시오. 애니메이션이 부드럽게 보입니다.

코드를 작성했습니다. 내 코드는 기본적으로 웃는 div가 원래 위치로 돌아가는 동안 fadeout합니다. 나는 눈에 더 부드럽게 보인다. 하지만 그 종류의 효과가 당신이 원하는 것인지 확실하지 않습니다.

링크 : My fork on jsFiddle.

PD : .le 클래스에 pointer-events: none; CSS 규칙을 추가했습니다. 이 규칙은 애니메이션 요소가 마우스 포인터 아래로 전달되는 동안 애니메이션을 중단하지 않도록합니다.

출처

2012-06-15 20:03:43

fadeout 효과가있는 jquery 애니메이션 사용

답변

관련 문제