Question

我正在尝试动画来自margin的表的转换：0 auto;到保证金：0 0 0 0;使用以下脚本，但无论我输入的参数是什么，动画都会立即发生。我该如何解决这个问题？

function select(box) {
  $("table td").not("#" + box).hide("slow");
  $("#" + box).animate({ height: 60, width: 60 }, "slow");
  $("table").animate({ "margin": "0px 0px 0px 0px" }, 1900);      //<--- problem here

  if(box != "help")
      $(".sideLinks").show("slow");
  else
      $(".sideLinks").not("#show_help_links").show("slow");
  }

编辑：这是html

<!DOCTYPE html>

<html>
<head>
    <meta http-equiv='X-UA-Compatible' content='IE=edge' />
<title>SAPUI5 First Test</title>

<link rel="Stylesheet" type="text/css" href="funStyle.css" />

<script id="sap-ui-bootstrap"
      src="resources/sap-ui-core.js"
      data-sap-ui-theme="sap_platinum"
      data-sap-ui-libs="sap.ui.commons, sap.ui.table">
</script>

    <!--<script src="pageAnimation.js"></script>-->
    <script src="Menu2.js"></script>
    <!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">-->
    </script>
</head>
<body id="body">
    <nav>
        <table class="links">
            <tr>
                <td id="HR_forms" class="homeLinks" onclick="select(this.id);">
                    <a href="#">
                    <!--<img src="images/HR.gif" /><br />HR forms-->
                    </a>
                </td>
                <td id="finance_forms" class="homeLinks" onclick="select(this.id);">
                    <a href="#">
                    <!--<img src="images/money.jpg" /><br />Finance forms-->
                    </a>
                </td>
            </tr>
            <tr>
                <td id="find_forms" class="homeLinks" onclick="select(this.id);">
                    <a href="#">
                   <!-- <img src="images/form.jpg" /><br />Other forms-->
                    </a>
                </td>
                <td id="all_forms" class="homeLinks" onclick="selectAll();">
                    <a href="#">
                    <!--<img src="images/list.jpg" /><br />All forms-->
                    </a>
                </td>
            </tr>
            <tr>
                <td id="help" class="homeLinks" onclick="select(this.id);">
                    <a href="#">
                    <!--<img src="images/help.png" /><br />Help-->
                    </a>
                </td>
                <td id="contact_us" class="homeLinks" onclick="select(this.id);">
                    <a href="#">
                    <!--<img src="images/phone.jpg" /><br />Contact Us-->
                    </a>
                </td>
            </tr>
        </table>
</nav>

<div id="show_all_links" class="sideLinks" style="display: none" onClick="reset();">Show All Links</div>

</body>
</html>

- 样式 -

body {
    /*background-color: #AAAAAA;*/
    background: url("images/black-honeycomb.jpg");
}

canvas {
    background-color: #7AC3E9;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    margin: 0 0px 0 0px;
    z-index: -1;
}

footer {
    background: url("images/marvelBar.png") no-repeat;
    background-size: 100%;
    position: absolute;
    bottom: 0;
    margin: 0px -13px -0px -10px;
    width: 100%;
    height: 83px;
}

.topBar {
    background: url("images/iPhone_toolbar_black.png");
    background-repeat: repeat-x;
    height: 43px;
    margin: -10px -8px 0px -10px;
    text-align: center;
    font: bold 24px helvetica;
    line-height: 2; 
    color: White;
}

.logo {
    position: absolute;
    right: 0;
    height: 40px;
    margin-right: 25px;
}

.back {
    background: url("images/backButton.png") no-repeat;
    background-size: 80px 33px;
    position: absolute;
    left: 0;
    top: 0;
    margin: 5px 0 10px 5px;
    width: 80px;
    height: 43px;
    font: bold 12px helvetica;
    color: White;
    text-align: center;
}

.login {
    background-color: #7AC3E9;
    position: absolute;
    left: 50%;
    top: 40%;
    margin-left: -171px;
    border: 1px solid black;
    border-radius: 15px;
}

.welcome {
    background-color: #7AC3E9;
    color: #3E4B61;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50px;
    margin-left: -81px;
    border: 1px solid black;
    border-radius: 15px;
    padding: 10px;
}

table {
    border-spacing: 5px;
}

ul {
    display: block;
    margin: -204px 0 0 0;
}

.HR_forms_links {
    display: none;
    list-style-type: none;
    background-color: White;
    border: 1px solid #C0C0C0;
    border-top-width: 0;
    border-left-width: 0;
    border-right-width: 0;
    text-align: left;
    padding: 10px 56px 10px 0;
    margin: 0px -8px 0 50px;
    background-image: url("images/listArrow.png") center;
}

.HR_forms_links a {
    display: block;
    margin: -10px 0px -10px 0px;
    text-decoration: none;
    font: bold 24px arial;
    color: Black;
    padding: 10px 46px 10px 10px;
    width: 100%;
    z-index: 10;
}

.finance_forms_links {
    display: none;
    list-style-type: none;
    background-color: White;
    border: 1px solid #C0C0C0;
    border-top-width: 0;
    border-left-width: 0;
    border-right-width: 0;
    text-align: left;
    padding: 10px 56px 10px 0;
    margin: 0px -8px 0 50px;
    background-image: url("images/listArrow.png") center;
}

.finance_forms_links a {
    display: block;
    margin: -10px 0px -10px 0px;
    text-decoration: none;
    font: bold 24px arial;
    color: Black;
    padding: 10px 46px 10px 10px;
    width: 100%;
    z-index: 10;
}

.help_links {
    display: none;
    list-style-type: none;
    background-color: White;
    border: 1px solid #C0C0C0;
    border-top-width: 0;
    border-left-width: 0;
    border-right-width: 0;
    text-align: left;
    padding: 10px 56px 10px 0;
    margin: 0px -8px 0 50px;
    background-image: url("images/listArrow.png") center;
}

.help_links a {
    display: block;
    margin: -10px 0px -10px 0px;
    text-decoration: none;
    font: bold 24px arial;
    color: Black;
    padding: 10px 46px 10px 10px;
    width: 100%;
    z-index: 10;
}

.contact_us_links {
    display: none;
    list-style-type: none;
    background-color: White;
    border: 1px solid #C0C0C0;
    border-top-width: 0;
    border-left-width: 0;
    border-right-width: 0;
    text-align: left;
    padding: 10px 56px 10px 0;
    margin: 0px -8px 0 50px;
}

.contact_us_links a {
    display: block;
    margin: -10px 0px -10px 0px;
    text-decoration: none;
    font: bold 24px arial;
    color: Black;
    padding: 10px 46px 10px 10px;
    width: 100%;
    z-index: 10;
}

#alt_help_menu {
    margin: 0;
}

#help_menu {
    margin-top: -140px;
}

#allForms {
    display: block;
    margin-top: -140px; 
}

.sideLinks {
    border-radius: 15px;
    text-align: center;
    height: 60px;
    width: 60px;
    background: #FFFF80;
    margin: 5px 0 0 7px;
}

.listArrow {
    padding: 0;
    height: 30px;
    margin: 0px -40px 0 0;
    float: right;
    border: none;
}

.subBar {
    background-image: url("images/iPhone_subtoolbar_black.png");
    height: 20px;
    text-align: left;
    color: White;
    font: bold 16px arial;
    text-shadow: 0 1px #999;
    margin: 0px -8px 0 50px;
    padding-right: 46px;
    list-style-type: none;
}

.subBar:hover {
    cursor: pointer;
}

.formsubBar {
    margin-top: -20px;
}


.logoText {
    margin: 0px 0 0 105px;
    position:relative;
    top: -54px;
}

h1 {
    color: Fuchsia;
}

h2 {
    font-size: small;
}

nav {
    margin: 0 auto;
    display: block;
}

nav li {
    list-style-type: none;
    padding: 0 10px 0 10px;
}


/*---------------Form Style----------------*/
.simple_hire {
    width: 100%;
    text-align: left;
    border: 1px solid #000000;
    }

.Simple_Hire_left {
    text-align: left;
    width: 50%;
    padding: 10px
    }

.Simple_Hire_right {
    text-align: left;
    width: 50%;
    padding: 10px;
    }

.Simple_Hire_mid {
    text-align: left;
    width: 100%;
    }

.Simple_Hire_left_2 {
    text-align: left;
    width: 50%;
    padding: 10px;
    }

.Simple_Hire_right_2 {
    text-align: left;
    width: 50%;
    padding: 10px;
    }

.submit1 {
    top: 550px;
    left: 550px;
    }

.reset {
    top: 550px;
    left: 440px;
    }

.right {
    float: right;
}

.textarea {
    float: right;
    width: 99%;
    margin: 0 0 0 -10px;
}

.formTable {
    display: none;
    margin-top: 224px;
    max-width: 850px;
    margin-left: 90px;
    margin-right: -8px;
    background: #7AC3E9;
}

.formTable ul {
    margin-left: -90px;
    margin-right: 8px;
}

.form {
    margin: 0 -8px 0 50px;
}

#send_reset {
    margin: -17px 0px 0 -30px;
    position: relative;
    left: 50%;
    max-width: 150px;
}

/*----------tabled app---------------*/

.links {
    margin: 0 auto 0 auto;
}    

.homeLinks {
    border: 1px solid #999999;
    border-radius: 15px;
    text-align: center;
    height: 150px;
    width: 150px;
    background: #FFFF80;
}
/*
.homeLinks {
    margin: 10px 0 0 0;
}
*/
.homeLinks img {
    height: 90%;
    width: 90%;
}


#HR_forms {
    background: url("images/HRtext.png") no-repeat 50% 50%; 
    background-size: 40%;
    background-color: #FFFF80;
} 

#finance_forms {    
    background: url("images/financeText.png") no-repeat 50% 50%; 
    background-size: 40%;
    background-color: #E01B6A;
}

#find_forms { 
    background: url("images/findform.png") no-repeat 50% 50%; 
    background-size: 40%;
    background-color: #1CE3ED;
}

#all_forms {
    background: url("images/Form.jpg") no-repeat 50% 50%; 
    background-size: 40%;
    background-color: #3BFF62;
}

#help {
    background: url("images/helpText.png") no-repeat 50% 50%; 
    background-size: 40%;
    background-color: #ff3300;
}

#contact_us {
    background: url("images/phone.jpg") no-repeat 50% 50%; 
    background-size: 40%;
    background-color: #FFFF80;
}

#loadingSpinner {
    background: #999999;
    height: 150px;
    width: 150px;
    border-radius: 15px;
    display: none;
    margin-top: 50%;
    margin-left: 50%;
}

更新：所以我通过将表格包装在动画中并使动画设置为动画来处理表格，但这不适用于上面的示例，对此有任何见解将非常感激

编辑：我发现我有2个jquery库，其中一个没有正确动画，谢谢你的帮助

Answer 1

你可以试试animate回调函数：

$("#" + box).animate({ height: 60, width: 60 }, "slow", function(){
   $("table").animate({ "margin": "0px"}, 1900); 
});

Answer 2

以下是应用于CSS边距的animate（）的工作示例：

http://jsfiddle.net/gabrieleromanato/hDVGj/

Answer 3

也许你期待另一个起步速度。选择缓和类型。我认为默认是线性的。

Answer 4

如果要在第一个动画后启动第二个动画，则可以实现完整的事件动画完成后调用的回调函数。 http://api.jquery.com/animate/ 您正在设置的参数是动画长度的持续时间。

Answer 5

是的，这是正确的行为。 auto是CSS属性的特殊值，它不是任何数字，而.animate只能用于数值。因此，当您开始动画时，表格边距变为0 0 0 0并且......就是这样。摆脱auto边距并使用一些数值来获得正确的插值，从而平滑动画。

jQuery动画持续时间

5 个答案: