0
這是我的問題：我有一個圖像滑塊，拒絕實際滑動。我花了最近兩個小時在這裏瀏覽答案，並看着JSFiddles。似乎沒有任何幫助。我的滑塊拒絕滑動，它只是消失
這是我的問題：我有一個HTML表格包含在一個div中，下面給出的屬性。當單擊頂部的按鈕時，滑塊（具有ID「滑塊」的div）應該通過幻燈片動畫進行切換。但相反，它沒有動畫就會出現或消失！
我已經確定它有一個高度和寬度，以及各種答案表示它需要的所有其他東西（儘管如果我不必在px中定義高度和寬度，從而讓它擴大或縮小到它需要大或小，會很棒）。但還沒有動畫！它只是消失！
請幫忙！
此外，大部分HTML都是您可以忽略的表格。只是開始和結束都很重要。
<h2><strong>SPRING CONVENTION SCHEDULE OF EVENTS</strong></h2>
<br>
<button id="toggleSwitch" onClick="toggleFlipFlop();">Click here to show table</button>
<!--table for Friday events-->
<div id = "slider" class="hidden">
<table id="friday-table">
<tbody>
<tr>
<th colspan="2"><strong>SCHEDULE OF EVENTS FOR FRIDAY, MARCH 31</strong></th>
</tr>
<tr>
<td>3:45 - 5:00</td>
<td>CONVENTION REGISTRATION</td>
</tr>
<tr>
<td>4:30 - 5:15</td>
<td>GRAPHIC ARTS REGISTRATION</td>
</tr>
<tr>
<td>4:30 - 4:50</td>
<td>CANDIDATES MEETING</td>
</tr>
<tr>
<td>5:15 - 5:25</td>
<td>SPIRIT COMPETITION</td>
</tr>
<tr>
<td>5:25 - 6:00</td>
<td>GENERAL ASSEMBLY</td>
</tr>
<tr>
<td>7:00 - 9:00</td>
<td>COSTUME CONTEST</td>
</tr>
<tr>
<td>7:30 - 9:00</td>
<td>SKIT CONTEST</td>
</tr>
<tr>
<td>7:15 - 8:00</td>
<td>ESSAY CONTEST</td>
</tr>
<tr>
<td>8:00 - 8:30</td>
<td>IMPROMPTU ART</td>
</tr>
<tr>
<td>8:00 - 9:30</td>
<td>SERVICE PROJECT</td>
</tr>
<tr>
<td>8:00 - 9:30</td>
<td>BOARD GAMES</td>
</tr>
</tbody>
</table>
<!--table for Saturday events-->
<table id="saturday-table">
<tbody>
<tr>
<th colspan="2"><strong>SCHEDULE OF EVENTS FOR SATURDAY, APRIL 1</strong></th>
</tr>
<tr>
<td>8:00 - 9:00</td>
<td>SCRAPBOOK CHECK-IN</td>
</tr>
<tr>
<td>8:00 - 9:00</td>
<td>GRAPHIC ARTS</td>
</tr>
<tr>
<td>8:15 - 8:45</td>
<td>CONVENTION REGISTRATION AND SATURDAY CHECK-IN</td>
</tr>
<tr>
<td>9:00 - 10:00</td>
<td>ACADEMIC TESTING (all levels)</td>
</tr>
<tr>
<td>10:15 - 10:45</td>
<td>SEMINAR SESSION I</td>
</tr>
<tr>
<td>10:30 - 12:30</td>
<td>DRAMATIC INTERPRETATION</td>
</tr>
<tr>
<td>10:30 - 11:00</td>
<td>MIDDLE SCHOOL CERTAMEN FINALS</td>
</tr>
<tr>
<td>11:00 - 11:30</td>
<td>SEMINAR SESSION II</td>
</tr>
<tr>
<td>11:00 - 11:30</td>
<td>ADVANCED CERTAMEN FINALS</td>
</tr>
<tr>
<td>11:30 - 12:00</td>
<td>INTERMEDIATE CERTAMEN FINALS</td>
</tr>
<tr>
<td>12:00 - 12:30</td>
<td>NOVICE CERTAMEN FINALS</td>
</tr>
<tr>
<td>12:30 - 3:00</td>
<td>GRAPHIC ARTS VIEWING</td>
</tr>
<tr>
<td>12:45 - 1:30</td>
<td>"MEET THE CANDIDATES" MEETING</td>
</tr>
<tr>
<td>1:00 - 2:30</td>
<td>LATIN SIGHT READING</td>
</tr>
<tr>
<td>1:00 - 2:30</td>
<td>ENGLISH ORATORY</td>
</tr>
<tr>
<td>1:00 - 2:30</td>
<td>OPEN CERTAMEN</td>
</tr>
<tr>
<td>1:30 - 2:30</td>
<td>OLYMPIKA I</td>
</tr>
<tr>
<td>2:00</td>
<td>VOTING BALLOTS DUE</td>
</tr>
<tr>
<td>3:00 - 4:00</td>
<td>OLYMPIKA II</td>
</tr>
<tr>
<td>3:00 - 3:30</td>
<td>CHARIOT RACING AND CATAPULT</td>
</tr>
<tr>
<td>3:00 - 3:30</td>
<td>GRAPHIC ARTS PICKUP</td>
</tr>
<tr>
<td>4:20 - 4:30</td>
<td>SPIRIT COMPETITION</td>
</tr>
<tr>
<td>4:30 - 5:00</td>
<td>CLOSING GENERAL ASSEMBLY</td>
</tr>
</tbody>
</table>
</div>
我的CSS：
#slider{
height: 1530px;
width: 524.317px;
transition: all 2s ease-in-out;
}
.hidden{
height: 0;
}
而且JS：
//script for slide down reveal for table
//to avoid taking up too much space
function toggleFlipFlop() {
var toggleSwitch = $("#toggleSwitch");
var slider = $("#slider");
console.log("HTML elements translated to objects");
function slideMe(slider) {
slider.toggleClass("hidden");
console.log("hidden class toggled");
};
console.log("SlideMe() successfully defined");
toggleSwitch.onclick = slideMe(slider);
console.log("onclick attribute of toggleswitch set");
}
該解決方案的問題是它會在我的網站上留下一個大的空白位置，在這個位置滑塊本應該去，這是我不能擁有的。這就是爲什麼我必須轉換高度。 –
@ Mr.Chameleon編輯。 –