jQuery fadeIn 未运行和内联故障

Question

我似乎无法让我的淡入淡出工作，而且我的动画也与另一个按钮搞乱了。我正在淡出一个 div，应用一些 css，然后尝试将其淡入。然而它只是立即出现并且 fadeIn 函数没有运行。

其次，正如您将看到的，我的一个按钮被从桌子上推开，我不知道为什么。

http://jsfiddle.net/Ufv68/2/

function animateTables(){
    $("#leaguesSelection").css({
        "overflow":"hidden",
        "margin-bottom":"0px"
    })
    $("#leaguesSelection").animate({
        height: "35px",
        padding:"2px"
    });
    $(".divisionHeader").fadeOut(400,function(){
        $(".divisionHeader").css({
            "display":"inline-block",
            "overflow":"hidden"
        });
    });
    $('.divisionHeader').animate({
        width: "35px",
        height: "35px",
        padding: "0"},
        400,function(){
            $(".divisionHeader").fadeIn(1800);
    });
    //$(".divisionHeader").fadeIn(1800);
}
$('.runMe').click(function(){
   animateTables(); 
});

Answer 1

告诉我这是否适合你http://jsfiddle.net/Djuka/UP6Q6/

function animateTables(){
        $("#leaguesSelection").css({
            "overflow":"hidden",
            "margin-bottom":"0px"
        })
        $("#leaguesSelection").animate({
            height: "35px",
            padding:"2px"
        });
        $(".divisionHeader").fadeOut(400,function(){
            $("#leaguesSelection div").css("float", "left");
            $(".divisionHeader").css({
                "overflow":"hidden",
                width: "35px",
                height: "35px",
                padding: "0"
            });
        }).fadeIn(1800);
}
$('.runMe').click(function(){
    animateTables(); 
});

它应该可以工作，但是按照你的方式去做真的很麻烦，我建议你改变方法。此外，如果您能描述动画后元素应如何定位，将会很有帮助。

试试这个：http://jsfiddle.net/Djuka/D3N5F/4/

这里也是反向动画。单击“全部”按钮一次正常，然后再次单击它以进行反向动画。如果过度使用，使用 jquery 动画功能制作动画会产生很多问题。这是因为 CSS 属性的更改直接写入 html 中该元素的样式属性，它会与其他 CSS 选择器混淆。此外，在我看来，以这种方式制作的动画看起来更流畅。