Question

我有一个jQuery滑块，应该在一组动画完成后加载。幻灯片附加到滑块，然后我尝试初始化滑块，但是，幻灯片似乎只是垂直堆叠。我相信当我打电话给$（＆＃39; .slider＆＃39;）时，它是空的。 Here就是一个例子。

滑块容器：

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

正在添加的幻灯片：

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

我的脚本中附加幻灯片并调用滑块的部分：

<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 ready wrapper $(function(){ ... });使脚本等到脚本加载完毕。

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

你可能躲过其中一个，但你应该同时做两个标准做法。

Answer 2

$(".slider").append(img,img2).queue(function() {
    $('.slider').sss();
});

将其放入$('document').ready( .. )

Answer 3

jsFiddle

JS

var img, img2, imagesSize = 2;
$( function() {
    img = $( "<img src='http://placehold.it/1042x222&text=1' />" );
    img.load( imgLoaded );
    img2 = $( "<img src='http://placehold.it/1042x222&text=2' />" );
    img2.load( imgLoaded );
} );
function imgLoaded() {
    imagesSize--;
    if ( imagesSize == 0 ) {
        $( ".slider" ).append( img, img2 ).sss();
    }
}

更好地等待所有图像全部加载。

<强> UPD
试试

`jQuery( ".slider" ).sss();`

您的sss加载奇怪...没有$.fn.sss，但jQuery.fn.sss存在。也许有些事情会覆盖jQuery $ {{1}}。{/ 1}}。

附加幻灯片后初始化滑块

3 个答案: