0
내 문제는 다음과 같습니다. 실제로 슬라이딩을 거부하는 이미지 슬라이더가 있습니다. 지난 2 시간 동안 JSFiddles를 살펴 보았습니다. 어떤 도움도없는 것 같습니다.내 슬라이더가 슬라이딩을 거부하고 그냥 사라집니다.
이것은 내 문제입니다. 아래 제공된 속성을 사용하여 div 내에 HTML 테이블이 있습니다. 상단의 버튼을 클릭하면 슬라이더 (id가 "div"인 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이 (가) 편집했습니다. –