Question

我的动画工作但不完全干净。如你看到的，它开始块状，如果动画完成，它会恢复正常（到图像）。我希望它不是块状的，所以我的动画看起来很流畅。

以全屏模式更好地观看

＆＃13;

<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>

＆＃13;

Answer 1

使用幻灯片为浏览器制作动画，因为动画是通过更改数值和使用cpu来呈现的。

你可以使用Transit库添加一个Jquery动画替换，它增加了使用css进行转换的好功能（GPU加速）所以

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

在这种情况下，比你的方法运行得更顺畅。

图像转换jquery

1 个答案: