CODEWITHSUNDEEP
jqueryhtmlanimation
Matt
Matt

Reputation: 105

Why is my jQuery animation not very smooth?

After the delay, it completely just JUMPS across the screen to the new spot, and it only animates the height. For some weird reason this doesn't happen when using percentages, only the pixel position. However, I need to use the pixel position. How can I fix this? Thanks!

<style>
    #Intro {
    position:relative;
    height:100%;
    width:100%;
    }

    #Picture {
    position: absolute;
    top: 30%;
    left: 33%;
    }
</style>

<script src="http://code.jquery.com/jquery-1.7.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
    $('#Picture').fadeIn(1000).delay(1500).animate({'top': '25px', 'left': '20px', 'height': '101px'},2000, 'swing');
    });
</script>


<body>

<div id="Intro">
    <img src="images/Triplid Logo.png" id="Picture" align="center"/>
</div>

</body>

Upvotes: 0

Views: 4297

Answers (3)

Reven
Reven

Reputation: 11

I faced similar problem. Animate.css library effect didn't have that problem (i guess because it uses translate3d).

Version adopted to my needs:

HTML
<h1 class="move">Some text</h1>

CSS
@keyframes slide {
    from {
    opacity: 0;
    transform: translate3d(0, -50%, 0);
    }
    to {
    opacity:1;
    transform: none;
    }
}

.slide {
  -webkit-animation-name: slide;
  animation-name: slide;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
   -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

jQuery
$(document).ready(function() {
$('.move').addClass('slide'); 
});

Upvotes: 1

James Johnson
James Johnson

Reputation: 46077

I would remove the delay(1500). Between the fade and animation it's already taking 3 seconds, and with the delay it's 4.5 seconds.

I would also consider setting the position to relative:

$('#Picture').css({ "position": "relative" });

Here's a similar shake function you can look at for reference:

jQuery.fn.shake = function() { 
    this.each(function(i) { 
        $(this).css({ "position": "relative" }); 
        for (var x = 1; x <= 3; x++) { 
            $(this).animate({ left: -25 }, 10).animate({ left: 0 }, 50).animate({ left: 25 }, 10).animate({ left: 0 }, 50); 
        } 
    }); 
    return this; 
}

Here's a jsFiddle that demonstrates it: http://jsfiddle.net/JppPG/3/

Upvotes: 0

Derek Hunziker
Derek Hunziker

Reputation: 13141

Matt, I think you may have discovered a bug. I was able to reproduce the jumping and does indeed work when using percentages exclusively or pixel units exclusively - not a mixture of the two.

There is an open bug with jQuery here: http://bugs.jquery.com/ticket/9505

As for ways to get around this. Since your image is absolutely positioned, you can measure the position (top/left) of the image on window.load and switch it's CSS from percentage to pixels using jQuery. Then perform the animation.

Example: http://jsfiddle.net/EHAR5/

Upvotes: 1

Related Questions