Question

我的JQuery动画有一个非常重要的问题，让我们从头开始。我目前拥有的代码是：

<script type="text/javascript">
var run = function(){
    $(".fade#f1").delay(1000).fadeIn(1000);
    $(".fade#f2").delay(2000).fadeIn(1000);
    $(".fade#f1").delay(4000).fadeOut(1000);
    $(".fade#f2").delay(4500).fadeOut(1000);
    $(".fade#f3").delay(8000).fadeIn(1000);
    $(".fade#f4").delay(9000).fadeIn(1000);
    $(".fade#f3").delay(5000).fadeOut(1000);
    $(".fade#f4").delay(5500).fadeOut(1000);
    $(".fade#f5").delay(16000).fadeIn(1000);
    $(".fade#f6").delay(17000).fadeIn(1000);
    $(".fade#f5").delay(5000).fadeOut(1000);
    $(".fade#f6").delay(5000).fadeOut(1000, function() { run() }); 
};

$(document).ready(function () {
run();
});


</script>

我的问题是，一旦动画运行一次，它在屏幕上出现的位置似乎会改变，我不确定为什么设置这个，这是我用来定位第一个元素的CSS代码： / p>

position: absolute;
margin-left: 262px;
margin-top: 44px;
width: 400px;

有谁知道为什么我的代码会这样做？

提前感谢您的任何帮助：）

这是HTML

            <div class="fade" id="fade">
            <img src="../images/ac.png" id="f1" class="fade">
            <img src="../images/tq.png" id="f2" class="fade">
            <img src="../images/ei.png" id="f3" class="fade">
            <img src="../images/1880.png" id="f4" class="fade">
            <img src="../images/rf.png" id="f5" class="fade">
            <img src="../images/e.png" id="f6" class="fade">

        </div>

Answer 1

这是因为fadeIn()和fadeOut()会更改显示值当fadeOut()函数调用时，元素显示将设置为none，因此如果您有相对元素，它们的位置将会改变。
要解决此问题，您应该使用fadeTo()。它使用不透明度而不是显示。了解更多[ HERE ]

var run = function(){
    $(".fade#f1").delay(1000).fadeTo(1000, 1);
    $(".fade#f2").delay(2000).fadeTo(1000, 1);
    $(".fade#f1").delay(4000).fadeTo(1000, 0);
    $(".fade#f2").delay(4500).fadeTo(1000, 0);
    $(".fade#f3").delay(8000).fadeTo(1000, 1);
    $(".fade#f4").delay(9000).fadeTo(1000, 1);
    $(".fade#f3").delay(5000).fadeTo(1000, 0);
    $(".fade#f4").delay(5500).fadeTo(1000, 0);
    $(".fade#f5").delay(16000).fadeTo(1000, 1);
    $(".fade#f6").delay(17000).fadeTo(1000, 1);
    $(".fade#f5").delay(5000).fadeTo(1000, 0);
    $(".fade#f6").delay(5000).fadeTo(1000, 0, function() { run() }); 
};

如何让JQuery动画保持在同一个地方？

1 个答案: