Question

所以我有以下听众：

.on('click', function () {
    if ($('.forum-select-button, .compareToTotal').css('display') == 'none') {
        $('.metric-number, .compareToTotal').each(function (i) {
            $(this).delay((Math.floor(i / (data.columnNames.length + 1)) + 1) * 250).fadeOut('slow', function () {
                $('.forum-select-button').each(function (i) {
                    $(this).delay((Math.floor(i / (data.columnNames.length + 1)) + 1) * 250).fadeIn('slow');
                });
            });
        });
    } else {
        $('.forum-select-button').each(function (i) {
            $(this).delay((Math.floor(i / (data.columnNames.length + 1)) + 1) * 250).fadeOut('slow', function () {
                $('.metric-number, .compareToTotal').each(function (i) {
                    $(this).delay((Math.floor(i / (data.columnNames.length + 1)) + 1) * 250).fadeIn('slow');
                });
            });
        });
    }
})

默认情况下，forum-select-button按钮设置为display:none，而metric-number和compareToTotal按钮设置为display:block。第一组工作，如数字逐渐消失，按钮出现，但如果再次单击该按钮，将会有一个很长的暂停，数字将重新出现，并且非常缓慢地按钮将重新出现。改变延迟似乎无能为力。

Answer 1

我最后通过写出延迟支持setTimeout来修复它。这是我的解决方案：

.on('click', function(){
    if($('.forum-select-button, .compareToTotal').css('display') == 'none'){
        $('.metric-number, .compareToTotal').each(function(i){
            setTimeout(function(){
                $(this).fadeOut('slow', function(){
                    $('.forum-select-button').each(function(i){
                        setTimeout(function(){
                            $(this).fadeIn('slow');
                        }.bind(this), (Math.floor(i / (data.columnNames.length + 1)) + 1) * 250);
                    });
                });
            }.bind(this), (Math.floor(i / (data.columnNames.length + 1)) + 1) * 250);
        });
    } else {
        $('.forum-select-button').each(function(i){
            setTimeout(function(){
                $(this).fadeOut('slow', function(){
                    $('.metric-number, .compareToTotal').each(function(i){
                        setTimeout(function(){
                            $(this).fadeIn('slow');
                        }.bind(this), (Math.floor(i / (data.columnNames.length + 1)) + 1) * 250);
                    });
                });
            }.bind(this), (Math.floor(i / (data.columnNames.length + 1)) + 1) * 250);
        });
    }
})

像魅力一样工作：）

第二次迭代后，分段jQuery淡入淡出

1 个答案: