jQuery 动画持续时间

【问题标题】：jQuery animate durationjQuery 动画持续时间
【发布时间】：2012-07-10 18:09:12
【问题描述】：

我正在尝试为来自 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%;
}

更新：所以我通过将动画包装在 a 中并为 div 设置动画来使动画与表格一起使用，但这不适用于我上面的示例，任何对此的见解将不胜感激

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

【问题讨论】：

  • 在简化情况下工作：jsfiddle.net/6eXz2
  • 这可能是因为 div 是块显示而不是表格？

标签： jquery jquery-animate duration


【解决方案1】：

你可以试试animate回调函数：

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

【讨论】：

  • 还是一样的瞬间过渡，只是在高度和宽度改变之后，我想同时发生
  • @Austin 你能发布 html 吗？问题应该与css有关。尝试相对放置桌子。
  • @Austin 谢谢。抱歉，如果没有它的内容和 CSS 样式，我们无法看到它的实际效果。
【解决方案2】：

也许您期望另一个启动速度。选择缓动类型。我认为默认是线性的。

【讨论】：

  • 你能扩展这个答案吗？
  • 看看这个很酷的页面。 jqueryui.com/demos/effect/easing.html 点击图片查看不同的ease efx 是如何工作的。有些启动缓慢，并且有不同的动画速度曲线。
  • 你需要一个插件。 gsgd.co.uk/sandbox/jquery/easing 你可以这样使用它： $(element).slideUp({ duration: 1000, easing: method, complete: callback});
【解决方案3】：

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

【讨论】：

    【解决方案4】：

    是的，这是正确的行为。 auto 是 CSS 属性的一个特殊值，它不是任何数字，而 .animate 只能使用数字值。因此，当您开始制作动画时，table margin 变为 0 0 0 0 并且...仅此而已。去掉auto 边距并使用一些数值来获得正确的插值，从而平滑动画。

    【讨论】：

    • 对不起，这不是答案，重置自动边距在该示例中有效，即使最初将边距设置为数值仍然会导致即时转换
    猜你喜欢
    • 2019-07-20
    • 1970-01-01
    • 1970-01-01
    • 2013-01-18
    • 2018-06-15
    • 2023-03-23
    • 1970-01-01
    • 1970-01-01
    • 2014-03-27
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode