gpt4 book ai didi

Javascript 淡入多个元素

转载 作者:行者123 更新时间:2023-11-28 15:59:25 26 4
gpt4 key购买 nike

在我的自定义 WordPress 主题中,我尝试在页面同时加载时为所有表格“节点”设置动画。

我可以通过将动画单独应用于每个元素来使该动画工作,但由于尝试自动化此过程,动画会同时淡入所有节点,我不明白为什么。

下面的代码生成我的节点...

    <div class="span12 news-tiles-container">
<div class="row span12 news-tiles-inner">
<?php
$node_id = 1;
$node_size_id = 1;
?>

<?php if ( have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<?php
if($node_size_id > 3) {
$node_size_id = 1;
}
?>

<a href='<?php the_permalink(); ?>'>
<div class='node node<?php echo $node_id ?> size<?php echo $node_size_id ?>'
style='background-image: url(<?php the_field( 'thumbnail' ); ?>);'>
<div id="news-caption" class="span12">
<p class="span9"><?php the_title(); ?></p>
<img class="more-arrow" src="<?php bloginfo('template_directory'); ?>/images/more-arrow.png" alt="Enraged Entertainment logo"/>
</div>
</div>
</a>

<?php
$node_size_id++;
$node_id++;
?>

<?php endwhile; endif; ?>
</div>
</div>

我使用以下代码来控制动画

$(document).ready(function(){

// Hide all of the nodes
$('.node').hide(0);

// Local Variables
var node_id = 1;
var nodes = 10;
var i = 0;


while(i <= nodes)
{
$('.node'+node_id).hide(0).delay(500).fadeIn(1000);

node_id+=1;
nodes--;

} });

我认为这与我的 while 循环有关,但节点计数器成功递增,因此它应该将动画应用到节点 1,然后是节点 2,然后是节点 3,依此类推。

提前致谢亚历克斯。

最佳答案

这是一个通用插件,可以在 jQuery 元素集合上按顺序执行您想要的任何动画:

(function ($) {
$.fn.queueEach = function (func) {
var args = [].slice.call(arguments, 1); // array of remaining args
var els = this.get(); // copy of elements
(function loop() {
var el = els.shift();
if (el) {
$.fn[func].apply($(el), args).promise().done(loop);
}
})();
return this;
}
})(jQuery);

用法:

$('.node').queueEach('fadeIn', 'slow');

工作演示位于 http://jsfiddle.net/alnitak/D39Cw/

关于Javascript 淡入多个元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17506647/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com