我正在尝试在ajax调用完成后让我的动画继续工作。当用户登陆页面时,它工作正常。但是如果用户导航回到首页,则动画将不会运行。我对Jquery很新,你能给我一些提示吗?
我认为它与.on
有关,但我不确定语法是否如此。任何帮助将不胜感激。
这是代码:
<script type="text/javascript">
(function() {
var quotes = $(".quoteName");
var quoteIndex = -1;
function showNextQuote() {
++quoteIndex;
quotes.eq(quoteIndex % quotes.length)
.fadeIn(3000)
.delay(12000)
.fadeOut(3000, showNextQuote);
}
showNextQuote();
})();
</script>
答案 0 :(得分:0)
据我所知,你有一个立即调用的函数表达式:
(function() {
})();
您放入的每个变量和函数声明(如showNextQuote()
)将无法从其他函数中访问。
(function() {
function showNextQuote(arg) {
alert( arg );
}
showNextQuote('A');
})();
showNextQuote('B'); // ReferenceError: showNextQuote is not defined
另一个原因是你的var quotes = $(".quoteName");
选择器可能没有结果,因为JS还没有准备好被JS解析,并且jQuery可以捕获你的元素。
jQuery( function($) { // DOM is now ready and the $ alias secured.
var quotes = $(".quoteName");
var quoteIndex = -1;
function showNextQuote() {
++quoteIndex;
quotes.eq(quoteIndex % quotes.length).fadeIn(3000).delay(12000)
.fadeOut(3000, showNextQuote);
}
showNextQuote();
// other functions here
$('selector').on('some event', 'dynamicSelector', function(){
showNextQuote(); // will work
// other stuff here?...
});
});
另一个提示是,如果使用新元素填充DOM,可能需要重新捕获它们以更新quotes.length
答案 1 :(得分:0)
看来,当你进行AJAX调用时,你会更新(我的意思是删除引号对象中包含的当前DOM节点并创建新的节点)。如果你这样做,当你对引号对象中的节点进行anitame时,什么都不会发生,因为它们不再属于你所看到的DOM。 jQuery对象没有“实时更新”,它们不会更改以反映DOM中的更改。 您需要的是在AJAX请求完成后再次进行此调用,以更新引号对象:
quotes = $('.quoteName');
当然,你的'quotes'对象不是全局的,所以如果你的AJAX调用不在你定义你发布的代码的匿名函数的范围内,你可能无法更新它。 / p>