JQuery анимация продолжительности

Question

JQuery анимация продолжительности

Я пытаюсь анимировать переход таблицы с поля: 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 libs, один из которых не правильно анимировать, спасибо за помощь

1

jquery jquery-animate duration

Источник

user1486537 10 июл '12 в 18:09

5 ответов

Решение

Может быть, вы ожидаете другую стартовую скорость. Выберите тип смягчения. Я думаю, что по умолчанию является линейным.

1

Источник

user1444743 10 июл '12 в 18:20

Ты можешь попробовать animate функция обратного вызова:

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

1

Источник

user848164 10 июл '12 в 18:16

Если вы хотите запустить вторую анимацию после первой, вы можете реализовать полное событие. Функция обратного вызова, которая вызывается после завершения анимации. http://api.jquery.com/animate/ Параметр, который вы устанавливаете, - это продолжительность анимации.

0

Источник

user1444743 10 июл '12 в 18:14

Да, это правильное поведение. auto это специальное значение для свойства CSS, это не любое число, в то время как .animate может работать только с числовыми значениями. Итак, когда вы начинаете анимацию, поле таблицы становится 0 0 0 0 и... и все. Избавляться от auto поля и использовать некоторые числовые значения, чтобы получить правильную интерполяцию и, следовательно, плавную анимацию.

-1

Источник

user1515552 10 июл '12 в 18:14

Другие вопросы по тегам jquery jquery-animate duration