0

在阅读 jq 后，我的问题仍然存在。我会改写这个问题..也许我会得到更多的回应；）

我正在尝试在 UL 中的不同元素上同时运行 2 个动画

删除第一行，动画其余部分，同时改变不透明度。

到目前为止，我得到了这个：

$('#NextUp li:first').slideUp( 500 , function() { 
    $('#NextUp li:first').remove();
    $('#NextUp li:first').attr('id', 'regel1');
});
$( ".t > li" ).each(function( intIndex ){
    var i =  1 - ($('li').index ($(this))/5) ;
    $(this).next().animate({ opacity: i }, {duration: 500,  queue: false})
});

导致2个动画相继出现。

我试图将幻灯片更改为使用动画，但它不想完成。（即动画在完成线没有被删除之前停止）

我怎样才能同时运行这两个动画？

4

1 回答 1

0

这是一种方法：

function fadeaway(el) {
    if (!el) {
        return false;
    }
    else {
        el.animate({'height' : 0}, 1000,
                   function(){
                       $(this).remove();
                       fadeaway($('ul.next_up > li:first'));
                   });                            
    }
}

fadeaway($('ul.next_up > li:first'));​

JS 小提琴演示。

这会将传入元素的高度设置为零，在回调中删除该元素，然后再次调用该函数以作用于下一个元素。

修改了上面的代码：

function fadeaway(el) {
    if (!el) {
        return false;
    }
    else {
        el.delay(500).animate({'height' : 0}, 1000,
                   function(){
                       var next = $(this).next();
                       $(this).remove();
                       fadeaway(next);
                   });                            
    }
}

fadeaway($('ul.next_up > li:first'));​

JS 小提琴演示。

这与上面的操作大致相同，但在动画之间提供了延迟（500 毫秒），并允许函数计算下一个兄弟应该是什么，而不是显式地对其进行硬编码。

此外，在这种方法中，它为 CSS 转换提供了一个时间来赶上......

参考：

于 2012-08-05T18:23:49.173 回答