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つは正しくアニメーション化されていないことがわかりました。助けてくれてありがとう