1

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%;
}

更新:そのため、アニメーションをテーブルでラップしてdivをアニメーション化することで、アニメーションをテーブルで動作させましたが、これは上記の例では機能しません。これに関する洞察をいただければ幸いです

編集:2つのjqueryライブラリがあり、そのうちの1つは正しくアニメーション化されていないことがわかりました。助けてくれてありがとう

4

4 に答える 4

1

多分あなたは別の開始速度を期待しています。イージングタイプを選択します。デフォルトは線形だと思います。

于 2012-07-10T18:20:51.047 に答える
1

animateコールバック関数を試すことができます:

$("#" + box).animate({ height: 60, width: 60 }, "slow", function(){
   $("table").animate({ "margin": "0px"}, 1900); 
});
于 2012-07-10T18:16:08.780 に答える
0

最初のアニメーションの後に 2 番目のアニメーションを開始する場合は、完了イベントを実装できます。アニメーションが完了したらコールバック関数を呼び出します。 http://api.jquery.com/animate/ 設定するパラメーターは、アニメーションの長さの期間です。

于 2012-07-10T18:14:03.097 に答える
-1

はい、それは正しい動作です。autoは CSS プロパティの特別な値であり、任意の数値ではありませんが.animate、数値でのみ機能します。アニメーションを開始すると、表の余白0 0 0 0... となり、それだけです。マージンを取り除き、autoいくつかの数値を使用して正しい補間を取得し、アニメーションをスムーズにします。

于 2012-07-10T18:14:55.140 に答える