画像の遷移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、second = target2、third = target3です。 – Samir

は、数値を変更し、CPUを使用してレンダリングされます。

あなたは移行のためのCSSを使用した便利な機能を追加するトランジットライブラリで交換をアニメーションのjQueryを追加することができます（GPUが加速）そう

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

は、この場合、あなたの方法よりもはるかにスムーズにすることによって実行されます。

出典

2017-12-13 10:51:18

答えて

関連する問題