Question

我试图让这个fadein / fadeout效果起作用，将一个div换成另一个。我似乎无法让它发挥作用。它在这里工作正常http://jsfiddle.net/jfriend00/3XwZv/

非常感谢任何帮助。

非常感谢！

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>

<script type="text/javascript">

var fadeinBox = $("#box2");
var fadeoutBox = $("#box1");

function fade() {
fadeinBox.stop(true, true).fadeIn(1000);
fadeoutBox.stop(true, true).fadeOut(1000, function() {
    var temp = fadeinBox;
    fadeinBox = fadeoutBox;
    fadeoutBox = temp;
    setTimeout(fade, 1000);
});
}

fade();

</script>

以下是样式

<style>

.box {
position: absolute;
height: 100px;
width: 100px;
}

#wrapper {position: relative;}

#box1 {background-color: #F00;}
#box2 {background-color: #00F;  display: none;}

</style>

这是HTML

<div id="wrapper">

<div id="box1" class="box">This box is our main div</div>


<div id="box2" class="box">This box fades in as other div fades out</div>

</div>

Answer 1

将您的jQuery包装在 document ready call 中，或将JS放在文档的末尾。您试图在尚不存在的元素上执行它。 jsFiddle默认在window.load调用中添加你的代码（参见jsFiddle左上角的选项）。

例如：

$(window).load(function(){
    var fadeinBox = $("#box2");
    var fadeoutBox = $("#box1");
    function fade() {
        fadeinBox.stop(true, true).fadeIn(2000);
        fadeoutBox.stop(true, true).fadeOut(2000, function() {
            var temp = fadeinBox;
            fadeinBox = fadeoutBox;
            fadeoutBox = temp;
            setTimeout(fade, 1000);
        });
    }
    fade();
});

Jquery Not Executing，在JSfiddle上运行正常

1 个答案: