jquery多个选择器,淡入淡出

时间:2013-08-21 13:42:02

标签: jquery multiple-select-query

我有点击功能

$("#productlink1").click(function() {
    $('#productstitle').fadeOut(1000, function(){
        $('#productstitle').html('<h4>Corporate Promotions </h4>').fadeIn(1000);
        });
    $('#productscontent,#flexibility').fadeOut(1000, function(){
        $('#corporate').fadeIn(1000);
        }); 

    remove();
    $(this).addClass('active');
return false;
});

所以,当我点击链接时,标题会淡出,然后新标题会淡入,一切正常

然而第二段代码,淡入淡出是在淡出之前出现的,这一行

$('#productscontent,#flexibility').fadeOut(1000, function(){
            $('#corporate').fadeIn(1000);
            });

但是,如果我只选择了一个元素,那么它可以正常工作

$('#productscontent').fadeOut(1000, function(){
                $('#corporate').fadeIn(1000);
                });

多个选择器是否存在问题?

由于

4 个答案:

答案 0 :(得分:2)

http://jsfiddle.net/XgtVw/

 $('#link').click(function() {
  $("#div1, #div2").each(function(){
    $(this).fadeOut(1000, function(){
        $('#div3').fadeIn(1000);
    });
}); 
})

答案 1 :(得分:1)

来自jQuery .fadeOut() documentation

  

如果动画了多个元素,请务必注意   每个匹配的元素执行一次回调,而不是一次   动画作为一个整体。

答案 2 :(得分:1)

感谢您提出的所有建议,我似乎无法完成上述工作,

基本上当元素被隐藏,它立即消失,对我来说这种“hacky”方式只是增加了延迟

$("#productlink1").click(function() {
    $('#productstitle').fadeOut(1000, function(){
        $('#productstitle').html('<h4>Corporate Promotions </h4>').fadeIn(1000);
        });
    $('#productscontent,#flexibility').fadeOut(1000, function(){
        $('#corporate').delay(1000).fadeIn(1000);
        }); 

    remove();
    $(this).addClass('active');
return false;
}); 

这停止了淡入,直到其他元素消失,这不是我想要修复它但它现在有效。

其他答案同样发生了

已隐藏的元素会淡化第一个

答案 3 :(得分:0)

<强> DEMO

希望您先隐藏元素corporate

$(document).ready(function(){
    $("#corporate").hide();     // hiding corporate on document load
    $("#productlink1").click(function() {
        $('#productstitle').fadeOut(1000, function(){
            $('#productstitle').html('<h4>Corporate Promotions </h4>').fadeIn(1000);
            });
        $('#productscontent,#flexibility').fadeOut(1000, function(){
            $('#corporate').fadeIn(1000);
            }); 

        remove();
        $(this).addClass('active');
    return false;
    });
    });