이미지 전환 jquery

내 애니메이션은 작동하지만 완전히 깨끗하지는 않습니다. 보시다시피, 시작이 완만 해지고 애니메이션이 끝나면 다시 정상으로 돌아갑니다. 나는 그것이 뭉툭하지 않기를 원한다. 그래서 나의 애니메이션은 매끈 해 보인다. 슬라이드로 인해 애니메이션 브라우저 무거운 애니메이션 전체 화면이미지 전환 jquery

<html> 
 
<head> 
 
    <title>The jQuery Example</title> 
 
    <script type="text/javascript" 
 
      src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> 
 
    </script> 
 

 
    <script type="text/javascript" 
 
      src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"> 
 
    </script> 
 

 
    <script type="text/javascript" language="javascript"> 
 

 
     $(document).ready(function() { 
 

 
      $("#show").ready(function() { 
 
       $(".target1").show("slide", {direction: "left"}, 1000); 
 
      }); 
 

 
      $("#show").ready(function() { 
 
       $(".target2").show("slide", {direction: "right"}, 1000); 
 
      }); 
 

 
      $("#show").ready(function() { 
 
       $(".target3").show("slide", {direction: "left"}, 1000); 
 
      }); 
 
     }); 
 

 
    </script> 
 
</head> 
 

 
<body> 
 

 
<img src="https://image.ibb.co/eMn59m/Samir_Boven.png" id="blauw" class="target1" 
 
    style="margin-top: 10px; width: 100%; height: 300px; display: none"> 
 
<img src="https://image.ibb.co/n4WAaR/Samir_Midden.png" id="geel" class="target2" 
 
    style="margin-top: -70px; width: 100%; height: 300px; display: none"> 
 
<img src="https://image.ibb.co/hLZ7N6/Samir_Onder.png" id="blauw2" class="target3" 
 
    style="margin-top: -40px; width: 100%; height: 300px; display: none"> 
 
</div> 
 
</body> 
 
</html>

출처

2017-12-13 Samir

어떤 요소는 id가'show' –

첫 번째 이미지 = target1, 두 번째 = target2, 세 번째 = target3입니다. – Samir

에

나은 시청이 수치를 변경하고, CPU를 사용하여 렌더링된다.

당신이 JQuery와 전환을 위해 CSS를 사용하는 좋은 기능을 추가 교통 라이브러리와 교체 애니메이션을 추가 할 수 있도록

function floatIn($element) { 
    $element.css({ 'opacity': 0, 'margin-top': 200px }); 
    $element.animate({ 'opacity': 1, 'margin-top': 0 }, { duration: 500 }); 
}

이 경우에 당신의 방법보다 훨씬 부드럽고에 의해 실행됩니다 (GPU 가속).

출처

2017-12-13 10:51:18

이미지 전환 jquery

답변

관련 문제