Fatal编程技术网

Javascript 下拉动画

javascript jquery html css

Javascript 下拉动画,javascript,jquery,html,css,jquery-animate,Javascript,Jquery,Html,Css,Jquery Animate,我希望我的下拉动画看起来像是从上面掉下来的，而不是像从0到100%的高度显示的滑动切换动画。我使用顶部，但它不隐藏在上面，所以我切换到边距顶部。我想要的下拉动画正在工作，但当它滑动时，它位于标题和切换按钮上方。我为标题和切换按钮设置了更高的z索引，但它不起作用 <body> <header> HEADER </header> <div id="opt-slide"> <span id="toggle"&

我希望我的下拉动画看起来像是从上面掉下来的，而不是像从0到100%的高度显示的滑动切换动画。我使用顶部，但它不隐藏在上面，所以我切换到边距顶部。我想要的下拉动画正在工作，但当它滑动时，它位于标题和切换按钮上方。我为标题和切换按钮设置了更高的z索引，但它不起作用

<body>
    <header>
    HEADER
    </header>
    <div id="opt-slide">
    <span id="toggle">OPTIONS</span>

    <ul id="dropdown">
        <li>Option 1</li>
        <li>Option 2</li>
        <li>Option 3</li>
        <li>Option 4</li>
        <li>Option 5</li>
    </ul>
    </div>
</body>
<style>
    * { margin:0; padding:0; font-family:Arial, Helvetica, sans-serif;}
    header { height:200px; background:#39F; z-index:4;}
    #opt-slide { width:300px;}
    #toggle { background:#099; display:block; height:50px; color:#FFF; line-height:50px; z-index:4;}
    #dropdown { background:#0C9; list-style:none; margin-top:-450px; z-index:2; opacity:0;}
    #dropdown li { height:40px; line-height:40px;}
    #dropdown li:hover { background:#FAFAFA;}

</style>


标题
选择权

    

  • 选择1
    • 

  • 选择2
    • 

  • 选择3
    • 

  • 选择4
    • 

  • 备选案文5
    • 


*{空白：0；填充：0；字体系列：Arial、Helvetica、sans serif；}
标题{高度：200px；背景：#39F；z索引：4；}
#选择幻灯片{宽度：300px；}
#切换{背景：#099；显示：块；高度：50px；颜色：#FFF；行高度：50px；z索引：4；}
#下拉列表{background:#0C9；列表样式：无；页边距顶部：-450px；z索引：2；不透明度：0；}
#下拉列表li{高度：40px；行高度：40px；}
#下拉列表li:悬停{背景：#FAFAFA；}
脚本：

<script>
$(document).ready(function() {

    var top = $('header').height() + $('#toggle').height() + $('#dropdown').height();

    $('#toggle').click(function() {

        if($('#opt-slide').hasClass('open')){
            $('#dropdown').animate({marginTop:-top, opacity:0},'slow');
            $('#opt-slide').removeClass('open');
        }else{
            $('#dropdown').animate({marginTop:0, opacity:1},'slow');
            $('#opt-slide').addClass('open');
        }


    });

    $('#dropdown > li').click(function() {
        $('#dropdown').animate({marginTop:-top},'slow');
        $('#opt-slide').removeClass('open');
    });

});
</script>


$（文档）.ready（函数（）{
var top=$（'header'）.height（）+$（'#toggle'）.height（）+$（'#dropdown'）.height（）；
$（“#切换”）。单击（函数（）{
if（$（'opt slide'）.hasClass（'open'））{
$（'#dropdown'）。设置动画（{marginTop:-top，不透明性：0}，'slow'）；
$（'opt slide'）。removeClass（'open'）；
}否则{
$（'#dropdown'）。设置动画（{marginTop:0，不透明度：1}，'slow'）；
$（'opt slide'）.addClass（'open'）；
}
});
$（'#下拉列表>li'）。单击（函数（）{
$（'#dropdown'）。动画（{marginTop:-top}，'slow'）；
$（'opt slide'）。removeClass（'open'）；
});
});
您需要为元素设置
位置：绝对
，以便
top
属性工作。然后将父元素的
position:relative
也设置为
#toggle
和
header
，以便应用
z-index
堆叠。

您需要将
position:absolute
设置为元素，以便
top
属性工作。然后将父元素的
position:relative
也设置为
#toggle
和
header
，以便应用
z-index
堆叠。

写入：

CSS:

JS:

写：

CSS:

JS:

我明白了，我要试试看。谢谢你是的。谢谢你，我会试试的。谢谢你是的。非常感谢你，我知道这是怎么回事。但我喜欢不同类型的动画。我在我的问题上说“不是幻灯片切换动画”。是的，我知道这是怎么回事。但我喜欢不同类型的动画。我在我的问题上说“不是幻灯片切换动画”。 
#dropdown {
    background:#0C9;
    list-style:none;
    margin-top:0px;
    z-index:2;
    display:none;
}

$('#toggle').click(function () {
    $('#dropdown').slideToggle();
    $('#opt-slide').toggleClass('open');
});

$('#dropdown > li').click(function () {
    $('#dropdown').slideUp();
    $('#opt-slide').removeClass('open');
});