gpt4 book ai didi

jquery - 使用 animate() 从底部向上滑动

转载 作者:太空宇宙 更新时间:2023-11-03 19:58:49 24 4
gpt4 key购买 nike

我正在尝试制作一个 <div>从另一个固定的底部滑动 <div>使用 animate()方法,但它不起作用,也许我做错了。这是代码:

HTML代码:

<body>
<div id="back">This is fixed.</div>
<div id="up">
<p>This should slide.</p>
</div>
</body>

CSS 部分:

        #back
{
background:#CCCCCC;
width:200px;
height:110px;
}

p
{
text-decoration:none;
}
p:hover
{
text-decoration:underline;
}
#up
{
background:#000000;
opacity:0.8;
width:200px;
height:5px;
position:absolute;
color:#dedede;
}

最后是 JS:

              $(document).ready(function(){


$('#back').hover(function(){
$('#up').animate({
height:'50px';
},1000);
});
});

这是 fiddle.

也查看了很多关于 SO 的其他问题,但没有一个对我有用。

更新:忘记提及滑动 <div> 的一件小事应该在那里停留一会儿,以便我可以点击链接。

最佳答案

更新:

你是说这个? => http://jsfiddle.net/tjp5m/11/

    $('#back, #up').hover(function(){ 
$('#up').stop().animate({
height:'50px',
marginTop:'-50px'
},1000);
},function(){
$('#up').stop().animate({
height:'5px',
marginTop:'0px'
},1000);
});

更新 2:

如果我是你,我会这样做 => http://jsfiddle.net/tjp5m/12/

效率更高

关于jquery - 使用 animate() 从底部向上滑动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24820716/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com