Question

您好我在此页面中使用了四个div。如果我点击一个div然后它将通过将其他div缩小到10％来显示其内容。 click here

我的问题是，当我点击div时，技术和保护div会分解到页面并返回。我想动画而不打破那个div。

这是我的代码，关于div click，

    //ABOUT CLICK STARTS HERE
  $("#about").click(function()
  {
        $('#about-con').css({'display': 'block', 'width': '45%', 'right': '30%'});
        $('#technology-con').css({'display': 'none', 'width': '', 'right': ''});
        $('#protection-con').css({'display': 'none', 'width': '', 'right': ''});
        $('#distribution-con').css({'display': 'none', 'width': '', 'right': ''});

        $("#distribution").animate({'width': '10%', 'float': 'left', 'margin-left': '45%'}, 800);
        $('#technology').animate({'width': '10%', 'float': 'left','margin-left': ''}, 800);
        $('#protection').animate({'width': '10%', 'float': 'left','margin-left': '-17px'}, 800);
        $("#about").css({'width': '25%','float': 'left','margin-left': ''},800);

    }); //END OF ABOUT CLICK

的CSS：

#about{
    height: 500px;
    background-color: red;
    cursor: pointer;
    width: 25%;
    z-index: 5;
    }

当我使用jquery animate（）方法进行动画处理时，div会中断

0 个答案: