Как сделать его более плавным с помощью переключателя («медленно»)
Вопрос
У меня есть следующий код, который работает, но в конце каждого действия переключения он становится немного нервным.
Будет ли это более плавно, если я переключу абзац?
Я пытаюсь получить этот абзац, но не знаю, как это сделать.
Кто-нибудь может мне помочь?
Заранее спасибо.
<head>
<style type="text/css">
body {width: 660px; margin: 0 auto; }
.toppara{
background-color: #FF9;
}
.morepara {
background-color: #fff;
display:none;
}
.togglebutn {
color: #900;
background-color: #FFF;
}
</style>
</head>
<body>
<div id="section1">
<div class="toppara"><p>Content 1.</p>
</div>
<div class="morepara">
<p>
Content 2.
</p>
</div>
<p class="togglebutn">
<a>Show/Hide</a>
</p>
</div><!-- section 1 -->
<!-- section 2 -->
<div id="section2">
<div class="toppara"><p>Content 3.</p>
</div>
<div class="morepara">
<p>
Content 4.
</p>
</div>
<p class="togglebutn">
<a>Show/Hide</a>
</p>
</div><!-- section 2 -->
<script language="javascript" type="text/javascript">
$(function() {
$('.togglebutn a').click(
function(){
var $parentpara = $(this).parent().prev();
$parentpara.toggle('slow');
});
});
</script>
Решение
Чтобы сдвинуть вниз, JQuery должен угадать конечную высоту элемента.Если это произойдет неправильно, вы увидите скачок, когда анимация закончится, и элемент сможет обрести свою естественную высоту.
Ваша проблема вызвана полями на p
тег, который занимает место в исходной оценке JQuery, но сворачивается после завершения анимации.
Решение состоит в том, чтобы либо удалить поля на p
теги, чтобы попытаться предотвратить схлопывание, задав для div .morepara явную высоту, границу или какое-либо верхнее/нижнее дополнение, хотя оба варианта имеют нежелательные побочные эффекты.
Другие советы
вы можете использовать .children('p')
чтобы получить доступ к <p> из <div>, но я предлагаю Вам попробовать .slideToggle('slow')
метод вместо .toggle
, по-прежнему применяя его к элементу <div>.В целом, он хорошо подходит для того, чего вы ожидаете.
Я не уверен, что вызывает дрожание.Я предполагаю, что это эффект, вызванный помещением абзаца в div, когда атрибут отображения div изменяется с «none» на «block».Я применил предложение Стэнча и придумал рабочий пример, который, кажется, работает немного лучше.
<html>
<head>
<style type="text/css">
body {width: 660px; margin: 0 auto; }
.toppara{
background-color: #FF9;
}
.morepara {
background-color: #fff;
}
.togglebutn {
color: #900;
background-color: #FFF;
}
</style>
</head>
<body>
<div id="section1">
<div class="toppara">
<p>Content 1.</p>
</div>
<div class="morepara">
<p>
Content 2.
</p>
</div>
<p class="togglebutn">
<a>Show/Hide</a>
</p>
</div>
<div id="section2">
<div class="toppara">
<p>Content 3.</p>
</div>
<div class="morepara">
<p>
Content 4.
</p>
</div>
<p class="togglebutn">
<a>Show/Hide</a>
</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$('document').ready( function (){
$('.morepara p').hide();
$('.togglebutn a').click(
function(){
var parentpara = $(this).parent().prev().children();
parentpara.toggle('normal');
}
);
});
</script>
</body>
</html>
Не уверен, что у вас уже есть ответ на этот вопрос, но придание переключаемым DIV определенной ШИРИНЫ действительно сработало для меня.проверено в FF и IE 7-8