javascript - 添加幻灯片后初始化 slider

Question

我有一个 jQuery slider ，它应该在一组动画完成后加载。幻灯片附加到 slider ，然后我尝试初始化 slider ，但是，幻灯片似乎只是垂直堆叠。我相信在我调用 $('.slider') 时，它是空的。 Here是一个例子。

slider 容器:

<div class="slider"></div>

正在添加的幻灯片:

var img = $("<img src='http://placehold.it/1042x222&text=1' />");
var img2 = $("<img src='http://placehold.it/1042x222&text=2' />");

我的脚本中附加幻灯片并调用 slider 的部分:

<script src="http://www.ctsciencecenter.org/js/sss.min.js"></script>
<script>
$('.sense1, .sense2, .sense3, .sense4, .sense5, .galatext, .galatext2, #gala5').delay( 800 ).fadeOut( "slow", function() {
$(".slider").append(img,img2);
$('.slider').sss();
});
</script>

这让我困惑了一个星期，谢谢你抽出时间，我真的很感激任何对这个问题的见解。

Answer 1

这是你的源代码

<script>$('#gala5').addClass('animated slideInLeft');$('#gala5').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',function(){$('.sense1').removeClass('offcanvas')
$('.sense1').addClass('animated slideInLeft')});$('.sense1').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',function(){$('.sense2').removeClass('offcanvas')
$('.sense2').addClass('animated slideInLeft')});$('.sense2').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',function(){$('.sense3').removeClass('offcanvas')
$('.sense3').addClass('animated slideInLeft')});$('.sense3').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',function(){$('.sense4').removeClass('offcanvas')
$('.sense4').addClass('animated slideInLeft')});$('.sense4').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',function(){$('.sense5').removeClass('offcanvas')
$('.sense5').addClass('animated slideInLeft')});$('.sense5').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',function(){$('.sense1, .sense2, .sense3, .sense4, .sense5, #gala5').removeClass('offcanvas').addClass('animated slideOutLeft')
$('.galatext').removeClass('offrcanvas').addClass('animated slideInRight')});$('.galatext').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',function(){$('.galatext2').removeClass('offrcanvas').addClass('animated slideInRight')});$('.galatext2').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',function(){$('.sense1, .sense2, .sense3, .sense4, .sense5, .galatext, .galatext2, #gala5').delay(800).fadeOut("slow",function(){$(".slider").append(img,img2);})
$('.slider').sss();});</script>
<script type="text/javascript" src="http://ctsciencecenter.org/wp-content/cache/minify/000000/yyrWLy4u1svNzAMA.js"></script>

wp-content/cache/minify/000000/yyrWLy4u1svNzAMA.js 是 sss.min.js

sss.min.js 在您尝试使用它之后 正在加载。

首先加载所有包含的脚本并使用 jQuery 的 DOM 就绪包装器 $(function(){ ... }); 让您的脚本等待脚本加载。

<script type="text/javascript" src="http://ctsciencecenter.org/wp-content/cache/minify/000000/yyrWLy4u1svNzAMA.js"></script>
<script>
    $(function(){
        $('#gala5').addClass( ... etc etc .. 
    });
</script>

您可能选择其中之一，但您应该将两者作为标准做法。