基本上在这里,我正在尝试使div在单击链接时缓慢向下滑动。默认情况下,通过将display属性设置为none可以隐藏div(请参见下文)。单击后,div变为可见(显示->块)并缓慢向下滑动。使用以下js代码,div会简单地显示,而不会发生任何下移。您可能认为这很琐碎,但您的反馈意见对我很有帮助。谢谢。
<div class="js-app-container" id="subscription_popup" style="padding-top: 70px; display: none;">
// contents inside the divs
</div>
<li class="menu-16246 last">
<a href="#" class="subscribe-link open_popup" onclick="displaySubscription();">Subscribe</a>
</li>
<script>
function displaySubscription() {
// $('.js-app-container').css('display', 'block').fadeIn("slow", function () {});
var node = document.getElementById('subscription_popup');
if (node.style.display == 'block') {
// node.style.display = 'none';
$('.js-app-container').css('display', 'none').fadeOut("slow", function() {});
} else
// node.style.display = 'block'
$('.js-app-container').css('display', 'block').slideDown("slow", function() {});
}
</script>
最佳答案
您无需在动画之前设置css display
。如果不为hide
和show
寻找不同的动画,则可以使用slideToggle
或fadeToggle
。
function displaySubscription() {
var node = $('#subscription_popup');
if (node.is(':visible'))
$('.js-app-container').fadeOut("slow", function() {});
else
$('.js-app-container').slideDown("slow", function() {});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="js-app-container" id="subscription_popup" style="padding-top: 70px; display: none;">
// contents inside the divs
</div>
<li class="menu-16246 last">
<a href="#" class="subscribe-link open_popup" onclick="displaySubscription();">Subscribe</a>
</li>