Question

我想滑动一个div然后更改背景颜色然后再滑动。我试过这个

function show_hide_mode_parameters(color){
    var is_hidden=$('#mode_parameters').is(':hidden');
    if (!is_hidden){
        $('#mode_parameters').slideUp('fast', function() {});
    }
    $('#mode_parameters').css('background-color', color);
    $('#mode_parameters').slideDown('slow', function() {});

}

但是当它开始立即滑动时会发生什么变化背景颜色，就像它不会执行sequantelly命令一样。有人能说出我做错了吗？

Answer 1

该代码需要在slideUp()的末尾运行，因此在动画结束时使用第二个参数，即回调。

function show_hide_mode_parameters(color){
    var is_hidden=$('#mode_parameters').is(':hidden');
    if (!is_hidden){
        $('#mode_parameters').slideUp('fast', function() {
            $('#mode_parameters').css('background-color', color);
            $('#mode_parameters').slideDown('slow');
        });
    }
}

此外，is_hidden然后! is_hidden闻起来有点气味。为什么不is_visible与:visible然后is_visible。

Answer 2

尝试

function show_hide_mode_parameters(color){
    var is_hidden=$('#mode_parameters').is(':hidden');
    if (!is_hidden){
        $('#mode_parameters').slideUp('fast', function() {
            $('#mode_parameters').css('background-color', color);
            $('#mode_parameters').slideDown('slow');
        });
    }

}

Answer 3

slideUp和slideDown被添加到jQuerys动画队列，而css则没有。这可能是你获得这种行为的原因。

使用queue方法，您可以将其添加到队列中。

这应该做你想要的：

function show_hide_mode_parameters(color){

    if ( !$('#mode_parameters').is(':hidden') ) {
        $('#mode_parameters').slideUp('fast');
    }        

    $('#mode_parameters').queue(function(next){
        $(this).css('background-color', color);
        next();
    }).slideDown('slow');      
}

使用div的代码中的SlideUp和SlideDown问题

3 个答案: