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>

Answers


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/


Need Your Help

Posting via SLComposeViewController on facebook and twitter in IOS-8

ios8 xcode6 slcomposeviewcontroller ios8-share-extension

I have tried to post on facebook and twitter using SLComposeViewController. my code is

Set the filename to date in batch

batch-file batch-processing batch-rename

So I have the idea of creating a logfile based on the date of the creation. I have to do this in batch. My code so far:

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.