jQuery动画方法不起作用

Question

我正在尝试使用JQuery .animate方法动态调整元素的大小，但是它不起作用：

 function showAudioDb(){ var dbInterval = setInterval(function(){ var dbLeft = Math.floor(Math.random() * 60) + 1; var dbRight = Math.floor(Math.random() * 60) + 1; var leftCover = Math.round(dbLeft/60*100); var rightCover = Math.round(dbRight/60*100); $('.audioLeft audioCover').animate({height: leftCover+'%'}, "slow") $('.audioRight audioCover').animate({height: rightCover+'%'}, "slow") }, 500); } showAudioDb(); 

 .channels { /*border-collapse: collapse;*/ border-spacing: 0; width: 100%; height: 100%; margin: 0; padding: 0; font-weight: bold; border: 1px solid rgba(30, 30, 30, 1); border-radius: 4px; overflow: hidden; background: url(images/comment-bg3.png) repeat; resize: both; } .channels td { border-left: 1px solid rgba(30, 30, 30, 1); } .channels td:first-child { border-left: none; } .channelHeader { height: 7%; text-align: center; background: url(images/comment-bg2.png) repeat; box-shadow: 0 2px 2px rgba(0,0,0,0.26); -webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.26); -moz-box-shadow: 0 2px 2px rgba(0,0,0,0.26); } .audioVideo { height: 79%; } .channelInfo { height: 7%; max-height: 7%; text-align: center; background: url(images/comment-bg2.png) repeat; border-bottom: 1px solid rgba(30, 30, 30, 1); border-top: 1px solid rgba(30, 30, 30, 1); box-shadow: 0 2px 2px rgba(0,0,0,0.26); -webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.26); -moz-box-shadow: 0 2px 2px rgba(0,0,0,0.26); } .channelInfo td { border-radius: 2px 2px 0 0; } .channelInfoValues { height: 7%; max-height: 7%; text-align: center; } .str0 {stroke:white;stroke-width:3.97;stroke-miterlimit:22.9256} .str1 {stroke:#999999;stroke-width:3.97;stroke-miterlimit:22.9256} .fil1 {fill:none} .fil0 {fill:#333333} .sound { padding: 0; margin: 0; } .audiodb { width: 100%; height: 100%; position: relative; } .levels { position: absolute; width: 80%; margin-left: 5%; top: 5%; height: 1px; left: 10%; background: silver; z-index: 300; } .level1 { top: 15%; } .level2 { top: 35%; } .level3 { top: 95%; } .audioBackground { width: 30%; height: 90%; left: 20%; position: absolute; top: 5%; background: #ff0000; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjclIiBzdG9wLWNvbG9yPSIjZmYwMDAwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMjAlIiBzdG9wLWNvbG9yPSIjZmFmZjAwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMzglIiBzdG9wLWNvbG9yPSIjMDBmZjJhIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwNmQxMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=); background: -moz-linear-gradient(top, #ff0000 0%, #ff0000 7%, #faff00 20%, #00ff2a 38%, #006d10 100%); /* FF3.6-15 */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff0000), color-stop(7%,#ff0000), color-stop(20%,#faff00), color-stop(38%,#00ff2a), color-stop(100%,#006d10)); /* Chrome4-9,Safari4-5 */ background: -webkit-linear-gradient(top, #ff0000 0%,#ff0000 7%,#faff00 20%,#00ff2a 38%,#006d10 100%); /* Chrome10-25,Safari5.1-6 */ background: -o-linear-gradient(top, #ff0000 0%,#ff0000 7%,#faff00 20%,#00ff2a 38%,#006d10 100%); /* Opera 11.10-11.50 */ background: -ms-linear-gradient(top, #ff0000 0%,#ff0000 7%,#faff00 20%,#00ff2a 38%,#006d10 100%); /* IE10 preview */ background: linear-gradient(to bottom, #ff0000 0%,#ff0000 7%,#faff00 20%,#00ff2a 38%,#006d10 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#006d10',GradientType=0 ); } .audioRight { left: 60%; } .audioCover { width: 100%; height: 30%; background: grey; } .audioNumbers { width: 10%; height: 100%; text-align: center; position: absolute; } .db { width: 100%; text-align: center; position: absolute; left: 15%; } .db p { margin-top: -5px; } .max { top: 5%; } .high { top: 15%; } .normal { top: 35%; } .low { top: 95%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/css-element-queries/0.4.0/ResizeSensor.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/css-element-queries/0.4.0/ElementQueries.min.js"></script> <table class="channels ui-draggable ui-resizable" style="width: 476px; height: 266px; position: relative;" oncontextmenu="return false;"> <tbody> <tr class="channelHeader ui-draggable-handle"> <td colspan="5" class="channelName" id="channel1" audiopid="[0x33]" audiostream1="format:mp2,type:audio,pid:[0x33],width:0,height:0" interface="192.168.222.15" method="info" multicast="239.10.20.101" port="6000" protocol="udp" resolution="1920x1080" serviceid="1" servicename="undefined" serviceprovider="provider" videopid="[0x31]" videostream="format:h264,type:video,pid:[0x31],width:1920,height:1080">undefined</td> <td colspan="2" class="channelNumber">1</td> </tr> <tr class="audioVideo"> <td colspan="5" class="vid"></td> <td colspan="2" class="sound"> <div class="audiodb"> <div class="audioNumbers"> <span class="db max"><p>0</p></span> <span class="db high"><p>6</p></span> <span class="db normal"><p>18</p></span> <span class="db low"><p>60</p></span> </div> <div class="audioBackground audioLeft"> <div class="audioCover"></div> </div> <div class="audioBackground audioRight"> <div class="audioCover"></div> </div> <span class="levels level0"></span> <span class="levels level1"></span> <span class="levels level2"></span> <span class="levels level3"></span> </div> </td> </tr> <tr class="channelInfo"> <td class="resolution">Resolution</td> <td class="aspect">Aspect</td> <td class="fps">FPS</td> <td class="vformat">V-Format</td> <td class="aformat">A-Format</td> <td>Left</td><td>Right</td> </tr> <tr class="channelInfoValues"> <td class="resolValue">1920x1080</td> <td class="aspectValue">---</td> <td class="fpsValue">---</td> <td class="vformatValue">H-264</td> <td class="aformatValue">MP2</td> <td class="leftBarValue">---</td> <td class="rightBarValue">---</td> </tr> </tbody> </table> 

这两个绿色列中的灰色部分是单独的divs ，应覆盖该列的某些部分。 .animate方法我在做什么错？

这是小提琴： https : //jsfiddle.net/vaxobasilidze/1hc2b5q5/

Answer 1

你错过了. 在代码中的audioCover类前面。 它应该像下面。

$('.audioLeft .audioCover').animate({height: leftCover+'%'}, "slow")
$('.audioRight .audioCover').animate({height: rightCover+'%'}, "slow")

更新的小提琴

代码段

 function showAudioDb(){ var dbInterval = setInterval(function(){ var dbLeft = Math.floor(Math.random() * 60) + 1; var dbRight = Math.floor(Math.random() * 60) + 1; var leftCover = Math.round(dbLeft/60*100); var rightCover = Math.round(dbRight/60*100); $('.audioLeft .audioCover').animate({height: leftCover+'%'}, "slow") $('.audioRight .audioCover').animate({height: rightCover+'%'}, "slow") }, 500); } showAudioDb(); 

 .channels { /*border-collapse: collapse;*/ border-spacing: 0; width: 100%; height: 100%; margin: 0; padding: 0; font-weight: bold; border: 1px solid rgba(30, 30, 30, 1); border-radius: 4px; overflow: hidden; background: url(images/comment-bg3.png) repeat; resize: both; } .channels td { border-left: 1px solid rgba(30, 30, 30, 1); } .channels td:first-child { border-left: none; } .channelHeader { height: 7%; text-align: center; background: url(images/comment-bg2.png) repeat; box-shadow: 0 2px 2px rgba(0,0,0,0.26); -webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.26); -moz-box-shadow: 0 2px 2px rgba(0,0,0,0.26); } .audioVideo { height: 79%; } .channelInfo { height: 7%; max-height: 7%; text-align: center; background: url(images/comment-bg2.png) repeat; border-bottom: 1px solid rgba(30, 30, 30, 1); border-top: 1px solid rgba(30, 30, 30, 1); box-shadow: 0 2px 2px rgba(0,0,0,0.26); -webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.26); -moz-box-shadow: 0 2px 2px rgba(0,0,0,0.26); } .channelInfo td { border-radius: 2px 2px 0 0; } .channelInfoValues { height: 7%; max-height: 7%; text-align: center; } .str0 {stroke:white;stroke-width:3.97;stroke-miterlimit:22.9256} .str1 {stroke:#999999;stroke-width:3.97;stroke-miterlimit:22.9256} .fil1 {fill:none} .fil0 {fill:#333333} .sound { padding: 0; margin: 0; } .audiodb { width: 100%; height: 100%; position: relative; } .levels { position: absolute; width: 80%; margin-left: 5%; top: 5%; height: 1px; left: 10%; background: silver; z-index: 300; } .level1 { top: 15%; } .level2 { top: 35%; } .level3 { top: 95%; } .audioBackground { width: 30%; height: 90%; left: 20%; position: absolute; top: 5%; background: #ff0000; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjclIiBzdG9wLWNvbG9yPSIjZmYwMDAwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMjAlIiBzdG9wLWNvbG9yPSIjZmFmZjAwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMzglIiBzdG9wLWNvbG9yPSIjMDBmZjJhIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwNmQxMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=); background: -moz-linear-gradient(top, #ff0000 0%, #ff0000 7%, #faff00 20%, #00ff2a 38%, #006d10 100%); /* FF3.6-15 */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff0000), color-stop(7%,#ff0000), color-stop(20%,#faff00), color-stop(38%,#00ff2a), color-stop(100%,#006d10)); /* Chrome4-9,Safari4-5 */ background: -webkit-linear-gradient(top, #ff0000 0%,#ff0000 7%,#faff00 20%,#00ff2a 38%,#006d10 100%); /* Chrome10-25,Safari5.1-6 */ background: -o-linear-gradient(top, #ff0000 0%,#ff0000 7%,#faff00 20%,#00ff2a 38%,#006d10 100%); /* Opera 11.10-11.50 */ background: -ms-linear-gradient(top, #ff0000 0%,#ff0000 7%,#faff00 20%,#00ff2a 38%,#006d10 100%); /* IE10 preview */ background: linear-gradient(to bottom, #ff0000 0%,#ff0000 7%,#faff00 20%,#00ff2a 38%,#006d10 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#006d10',GradientType=0 ); } .audioRight { left: 60%; } .audioCover { width: 100%; height: 30%; background: grey; } .audioNumbers { width: 10%; height: 100%; text-align: center; position: absolute; } .db { width: 100%; text-align: center; position: absolute; left: 15%; } .db p { margin-top: -5px; } .max { top: 5%; } .high { top: 15%; } .normal { top: 35%; } .low { top: 95%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/css-element-queries/0.4.0/ResizeSensor.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/css-element-queries/0.4.0/ElementQueries.min.js"></script> <table class="channels ui-draggable ui-resizable" style="width: 476px; height: 266px; position: relative;" oncontextmenu="return false;"> <tbody> <tr class="channelHeader ui-draggable-handle"> <td colspan="5" class="channelName" id="channel1" audiopid="[0x33]" audiostream1="format:mp2,type:audio,pid:[0x33],width:0,height:0" interface="192.168.222.15" method="info" multicast="239.10.20.101" port="6000" protocol="udp" resolution="1920x1080" serviceid="1" servicename="undefined" serviceprovider="provider" videopid="[0x31]" videostream="format:h264,type:video,pid:[0x31],width:1920,height:1080">undefined</td> <td colspan="2" class="channelNumber">1</td> </tr> <tr class="audioVideo"> <td colspan="5" class="vid"></td> <td colspan="2" class="sound"> <div class="audiodb"> <div class="audioNumbers"> <span class="db max"><p>0</p></span> <span class="db high"><p>6</p></span> <span class="db normal"><p>18</p></span> <span class="db low"><p>60</p></span> </div> <div class="audioBackground audioLeft"> <div class="audioCover"></div> </div> <div class="audioBackground audioRight"> <div class="audioCover"></div> </div> <span class="levels level0"></span> <span class="levels level1"></span> <span class="levels level2"></span> <span class="levels level3"></span> </div> </td> </tr> <tr class="channelInfo"> <td class="resolution">Resolution</td> <td class="aspect">Aspect</td> <td class="fps">FPS</td> <td class="vformat">V-Format</td> <td class="aformat">A-Format</td> <td>Left</td><td>Right</td> </tr> <tr class="channelInfoValues"> <td class="resolValue">1920x1080</td> <td class="aspectValue">---</td> <td class="fpsValue">---</td> <td class="vformatValue">H-264</td> <td class="aformatValue">MP2</td> <td class="leftBarValue">---</td> <td class="rightBarValue">---</td> </tr> </tbody> </table>