反向slideToggle

Question

我正试图将slideToggle从上往下逆转。我不想透露元素是什么，我希望它从顶部滑入。

我不知道该如何解释，所以这里是jsfiddle：http://jsfiddle.net/h6E7f/。如果您单击" header“，它将显示标题，而不是自上而下地滑动。如果你点击“页脚”，你可以看到页脚从底部向上滑动。这就是我想要做的头球，但当然相反。有没有人用"slideToggle“来做这件事，或者我被”动画“困住了？

HTML

<a href="#" class="header">header</a>
<a href="#" class="footer">footer</a>
<header>
    <h1>header</h1>
</header>


<footer>
    <h1>footer</h1>
</footer>

JQuery

jQuery(function ($) {
    $('.header').on('click', function(){
        $('header').slideToggle(200);
    });

    $('.footer').on('click', function(){
        $('footer').slideToggle(200);
    });

});

Answer 1

在这里，它滑了下来，完成了：-删除显示:隐藏在头类中(只是为了方便)-使用手写的切换函数将“边距顶”从-100 0px动画到0 0px。

你用绝对的定位我留下了它的原样。如果您希望标题在链接下面滑动，请使用带有溢出-y:隐藏等的包装div。

​

jQuery(function ($) {
    var a = true;
	$('.header').on('click', function(){
        if(a){
            $('header').animate({"margin-top":"0px"});
        }else{
            $('header').animate({"margin-top":"-100px"});
        }
        a=!a;
	});

	$('.footer').on('click', function(){
		$('footer').slideToggle(200);
	});
    
});

header{
    position: absolute;
    height: 50px;
    width: 100%;
    background: red;
}

footer{
    display: none;
    position: absolute;
    bottom: 0;
    height: 50px;
    width: 100%;
    background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="header">header</a>
<a href="#" class="footer">footer</a>
<header style="margin-top:-100px">
    <h1>header</h1>
</header>


<footer>
    <h1>footer</h1>
</footer>

​

Answer 2

在Fiddle网址上更新：http://jsfiddle.net/6Zt9A/

<h1 style="display: none" id="header_wrapper">header</h1>
<a href="#" class="header">header</a>
<a href="#" class="footer">footer</a>
<h1 style="display: none" id="footer_wrapper">footer</h1>

jQuery(function ($) {
$('.header').on('click', function() {
    $('#header_wrapper').slideToggle(200);
})
$('.footer').on('click', function() {
    $('#footer_wrapper').slideToggle(200);
})

)；

Answer 3

您需要更改css和效果，以使标题向下滑动。

Javascript

jQuery(function ($) {
    var posy;
    $('.header').on('click', function(){
        posy = (posy==50?-50:50);
        $('header').animate(
        {
            top:posy
        }, 300);
        //$('header').slideToggle(200);
    });

    $('.footer').on('click', function(){
        $('footer').slideToggle(200);
    });
});

CSS

header {
    position: absolute;
    top:-50px;
    height: 50px;
    width: 100%;
    background: red;
}

footer {
    display: none;
    position: absolute;
    bottom: 0;
    height: 50px;
    width: 100%;
    background: red;
}

见Demo http://jsfiddle.net/h6E7f/4/