我的滑塊拒絕滑動，它只是消失

Question

這是我的問題：我有一個圖像滑塊，拒絕實際滑動。我花了最近兩個小時在這裏瀏覽答案，並看着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"); 
} 

Answer 1

你在複雜。您使用調用實例化再次調用同一個按鈕上點擊功能的功能內嵌onClick ...... EHH

而且，因爲你不能可靠動畫/撥動高度CSS3使用jQuery slideToggle()

function toggleFlipFlop() { 
 
    $("#slider").slideToggle(1000); 
 
} 
 

 

 
// REMOVE inline JS: onClick="toggleFlipFlop();" 
 
// and use this: 
 
$("#toggleSwitch").on("click", toggleFlipFlop);

#slider { 
 
    height: 1530px; 
 
    width: 524.317px; 
 
    /*transition: all 1s ease-in-out; you cannot use this I'm sorry. */ 
 
} 
 

 
.hidden { 
 
    display: none; /* use this instead */ 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h2><strong>SPRING CONVENTION SCHEDULE OF EVENTS</strong></h2> 
 
<br> 
 
<button id="toggleSwitch">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>

沒錯。您不能在CSS3中可靠地轉換height。 （最終最小高度，但甚至比它不完美）