Question

在延迟之后，它完全只是屏幕上的JUMPS到新的位置，它只能动画高度。出于某些奇怪的原因，当使用百分比时，这不会发生，只有像素位置。但是，我需要使用像素位置。我怎样才能解决这个问题？谢谢！

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

Answer 1

马特，我想你可能已经发现了一个错误。我能够重现跳跃，并且在使用百分比或专用像素单位时确实有效 - 而不是两者的混合。

这里有一个jQuery的漏洞： http://bugs.jquery.com/ticket/9505

至于解决这个问题的方法。由于您的图像绝对定位，您可以在window.load上测量图像的位置（顶部/左侧），并使用jQuery将其CSS从百分比切换为像素。然后执行动画。

示例：http://jsfiddle.net/EHAR5/

Answer 2

我会移除delay(1500)。在淡入淡出和动画之间它已经花了3秒钟，延迟时间为4.5秒。

我还会考虑将position设置为relative：

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

这是一个类似的shake函数，您可以查看以供参考：

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

这是一个演示它的jsFiddle：http://jsfiddle.net/JppPG/3/

Answer 3

我遇到了类似的问题。 Animate.css库效果没有这个问题（我猜因为它使用translate3d）。

根据我的需要采用的版本：

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'); 
});

为什么我的jQuery动画不是很流畅？

3 个答案: