CODEWITHSUNDEEP
javascriptjqueryhtmlcssanimation
user8724413
user8724413

Reputation:

Images transition jquery

My animation is working but not completely clean. As you can see, It starts blocky and if the animation is done, It goes back to normal (to the image). I want it to be not blocky, So my animation looks smooth.

better viewing in full screen mode

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

Upvotes: 0

Views: 51

Answers (1)

Mos&#232; Raguzzini
Mos&#232; Raguzzini

Reputation: 15821

animating with slides its heavy for browser because of animation are rendered by changing numerical values and using cpu.

You can add a Jquery animate replacement with Transit library which adds the nice feature of using css for transition (GPU accelerated) so

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

Will run by far smoother than your method in this case.

Upvotes: 1

Related Questions