В настоящее время я использую этот скрипт для типа системы «вкладки». При нажатии на одну вкладку все остальные скрываются. Все они div. Но сейчас я не думаю, что он исчезает достаточно быстро, прежде чем загрузится выбранный div. В конечном итоге он смещается под выбранный элемент div и теперь отображается.
Мне не нужен переключатель, потому что, как вы видите, у меня есть 5 вкладок, которые я хочу открыть при нажатии на соответствующий им div «_s». Исчезать, исчезать.
Есть ли способ сделать затухание до появления или, может быть, добавить задержку? Я не знаю, как добавить задержку в этот сценарий или проверить, полностью ли исчезает div перед тем, как появится новый div.
Буду признателен за любую помощь. Благодарю вас!
<script>
$("#teach_one").click(function() {
$("#teach_one_s").fadeIn("slow");
$("#teach_two_s").fadeOut("fast");
$("#teach_three_s").fadeOut("fast");
$("#teach_four_s").fadeOut("fast");
$("#teach_five_s").fadeOut("fast");
});
$("#teach_two").click(function () {
$("#teach_two_s").fadeIn("slow");
$("#teach_one_s").fadeOut("fast");
$("#teach_three_s").fadeOut("fast");
$("#teach_four_s").fadeOut("fast");
$("#teach_five_s").fadeOut("fast");
});
$("#teach_three").click(function () {
$("#teach_three_s").fadeIn("slow");
$("#teach_one_s").fadeOut("fast");
$("#teach_two_s").fadeOut("fast");
$("#teach_four_s").fadeOut("fast");
$("#teach_five_s").fadeOut("fast");
});
$("#teach_four").click(function () {
$("#teach_four_s").fadeIn("slow");
$("#teach_one_s").fadeOut("fast");
$("#teach_two_s").fadeOut("fast");
$("#teach_three_s").fadeOut("fast");
$("#teach_five_s").fadeOut("fast");
});
$("#teach_five").click(function () {
$("#teach_five_s").fadeIn("slow");
$("#teach_one_s").fadeOut("fast");
$("#teach_two_s").fadeOut("fast");
$("#teach_three_s").fadeOut("fast");
$("#teach_four_s").fadeOut("fast");
});
</script>
Вот мой HTML по вашему запросу:
<ul class="noselect teach_home_navigator_tabs">
<li id="teach_one">
</li>
<li id="teach_two">
</li>
<li id="teach_three">
</li>
<li id="teach_four">
</li>
<li id="teach_five">
</li>
</ul>
<div class="infotab teach_round" id="teach_one_s">
stufff
</div>
<div class="infotab teach_round" id="teach_two_s">
stufff
</div>
<div class="infotab teach_round" id="teach_three_s">
stufff
</div>
<div class="infotab teach_round" id="teach_four_s">
stufff
</div>
<div class="infotab teach_round" id="teach_five_s">
stufff
</div>