Question

正如你所看到的，我已经达到了这样的程度，我只是把我的代码扔到编辑器上，希望能够进行一些锻炼，但看起来代码只是拒绝回答我的命令。

当我运行代码时发生的事情是两个图像中只有一个（有时是image1，有时是image2）淡出然后再次淡化而没有更改，而另一个图像永远不会出现。我试过使用.Query的JQuery - 也没用。

此刻我很困，所以我希望这是一个沉闷的，因为我已经搜索过，到目前为止我找不到任何帮助。

我希望你们能够以某种方式为我解决这一次，提前谢谢。

编辑：

你提供的所有真正的帮助，但现在它只运行一次，在它完成第一个周期之后，幻灯片开始表现得很奇怪......它只有一半时间淡入/淡出，有时它甚至没有显示其中一张图片，然后，在下一个周期中，它确实显示丢失的图片。

我想问题是我把整个东西放在'for循环'里面。

它只运行一次（在asp.net页面上它在循环中自动运行但在PHP页面上我不知道如何让它在循环中运行所以我做'for循环'）我希望并猜测它是不是正确的解决方案，而且你可以提供更好的解决方案。

$('#bigPicture1').delay(5000).animate({opacity: '0'}, 1000);
document.getElementById('bigPicture1').style.display = 'none';
document.getElementById('bigPicture2').style.display = 'block';
$('#bigPicture2').animate({opacity: '1'}, 1000);
$('#bigPicture2').delay(5000).animate({opacity: '0'}, 1000);
document.getElementById('bigPicture2').style.display = 'none';
document.getElementById('bigPicture1').style.display = 'block';
$('#bigPicture1').animate({opacity: '1'}, 1000);

/*->->-> The new described code <-<-<-*/

$(document).ready(function(){
        for(c = 0; c < 10000; c++)
        {
            $('#bigPicture1').delay(5000).animate({opacity: '0'}, 1000, function() {
                document.getElementById('bigPicture1').style.display = 'none';
                document.getElementById('bigPicture2').style.display = 'inline-block';
                $('#bigPicture2').animate({opacity: '1'}, 1000, function(){

                    $('#bigPicture2').delay(5000).animate({opacity: '0'}, 1000, function() {
                        document.getElementById('bigPicture2').style.display = 'none';
                        document.getElementById('bigPicture1').style.display = 'inline-block';
                        $('#bigPicture1').animate({opacity: '1'}, 1000);
                    });
                });
            });
        }
    });

Answer 1

看起来你想在动画完成后分配样式，对吗？

在这种情况下，您可以将第三个参数（回调函数）传递给.animate（），如下所示：

$('#bigPicture1').delay(5000).animate({opacity: '0'}, 1000, function(){ // do stuff after bigPicture1 has an opacity of 0 $('#bigPicture2').css({opacity: 0, display: 'block'}).animate({opacity: '1'}, 1000, function(){ // and so on.. }); });

在这里，您会找到further information

Answer 2

.animate(...)是异步的。 （这次你必须使用回调）

将此想法与Ganesh's结合使用：

$('#bigPicture1').animate({opacity: '0'}, 1000, function(){ $('#bigPicture1').hide(); $('#bigPicture2').css('display','block'); $('#bigPicture2').animate({opacity: '1'}, 1000, function(){ $('#bigPicture2').animate({opacity: '0'}, 1000, function(){ $('#bigPicture2').hide(); $('#bigPicture1').css('display','block'); $('#bigPicture1').animate({opacity: '1'}, 1000); ); ); );

Answer 3

您可以为动画使用回调功能，以确保在隐藏第一张图像之前不显示第二张图像。

这只会运行一次，但您可以修改它以在完成后自行调用以使其连续运行。

<强> jsFiddle example

$(function () {
    $('#bigPicture1').delay(5000).animate({
        opacity: '0'
    }, 1000, function () {
        $('#bigPicture1').hide();
        $('#bigPicture2').show();
        $('#bigPicture2').animate({
            opacity: '1'
        }, 1000, function () {
            $('#bigPicture2').delay(5000).animate({
                opacity: '0'
            }, 1000, function () {
                $('#bigPicture2').hide();
                $('#bigPicture1').show();
                $('#bigPicture1').animate({
                    opacity: '1'
                }, 1000);
            });
        });
    });
});

Answer 4

原因是您在jQuery调用上设置了超时（一次为5秒），因此jQuery调用之后的代码在动画之前执行。这就是你需要的：

$('#bigPicture1').delay(5000).animate({opacity: '0'}, 1000, function() {
    document.getElementById('bigPicture1').style.display = 'none';
    document.getElementById('bigPicture2').style.display = 'block';
});

这将添加回调以使其在动画完成后执行样式代码。

Answer 5

您正在使用jQuery，因此最好充分利用它：

$('#bigPicture1').hide();
$('#bigPicture2').show();

而不是：

document.getElementById('bigPicture1').style.display = 'none';
document.getElementById('bigPicture2').style.display = 'block';

为什么我的getElementById.style.display不起作用？

5 个答案: