Home/ Questions/Q 6788383
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T17:28:46+00:00

After the delay, it completely just JUMPS across the screen to the new spot,

  • 0

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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/

    • 0