Question

我有一个jQuery动画，可以在Firefox中使用，但是IE和Chrome搞砸了。我正在尝试创建两个相邻的div，它们可以在单击时互相替换并扩展到其父级的全宽。问题在于正确的div和它的动画。它正在将左侧div推向左侧，以便为扩展的div腾出空间，但在IE / Chrome中它会向下跳跃，而在FF中它会保持与它开始时相同的水平。

如果我将右侧div的显示从块更改为内联块，我在Firefox中获得相同的跳跃效果。

JSFiddle

这是jQuery代码：

 $("#articleChat").click(function(){
    if (!chat){

        $(".leftpocket").animate({left:-500},function(){});
        //transfer the left div out of the way
        $(".rightpocket").css("border-style", "hidden").css("margin-left","10px");

        $(".rightpocket").animate({width:'760px', height:'600px'},50);
        //expand the right div
        NPC=false;
        chat=true;
    }
    else{

    $(".rightpocket").animate({width:'250px', height:'400px'}, 100, function(){
    //shrink the right div
    $(".leftpocket").delay(500).animate({left:0}, function(){
        $(".rightpocket").css("border-style", "inset").css("margin-left","5px");}); 
    });

    NPC=false;
    chat=false;
    };
});

CSS：

.leftpocket{
    height:400px;
    width:250px;
    overflow:hidden;
    position:relative;
    float:left;
    border-style:inset;
    border-color: #8B4513;
    border-width: 0 15px 15px 0;
    -webkit-border-bottom-right-radius: 15px;
    -moz-border-radius-bottomright: 15px;
    border-bottom-right-radius: 15px;
    margin: 0 5px 0 5px;    
}
.rightpocket{
        display:block;
        height:400px;
        width:250px;
        overflow:hidden;
        position:relative;
        border-style:inset;
        border-color: #8B4513;
        border-width: 0 15px 15px 0;
        -webkit-border-bottom-right-radius: 15px;
        -moz-border-radius-bottomright: 15px;
        border-bottom-right-radius: 15px;
        margin: 5px;
}

欢迎任何想法

jQuery在IE / Chrome中的动画效果与Firefox不同

0 个答案: