Question

我正在尝试使用<div>方法在另一个固定<div>上从底部制作一个animate()幻灯片，但它不起作用，也许我做错了。这是代码：

HTML code：

<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>应该保留一段时间的小事，以便我可以点击链接。

Answer 1

<强>更新：

你是说这个意思吗？ =＆GT; 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/

效率更高

Answer 2

您只能使用CSS执行此操作，并希望在max-height悬停时up为back属性设置动画。在CSS中实现它的好处是它还保持了一个明确的关注点分离（内容的HTML，功能的JS和演示的CSS）。

Demo Fiddle

(demo of sliding the other way)

    #back {
        background:#CCCCCC;
        width:200px;
        height:110px;
    }
    p {
        text-decoration:none;
    }
    p:hover {
        text-decoration:underline;
    }
    #up {
        background:#000000;
        opacity:0.8;
        width:200px;
        max-height:5px; /* set height when slid up */
        position:absolute;
        color:#dedede;
        overflow:hidden; /* hide content when minimized */
        transition:max-height 1s ease-in; /* <--- set transition(animation) properties */
    }
    #back:hover + #up {
        max-height:50px;/* set height when slid down*/
    }

Answer 3

您使用.animate()

的错误语法

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

Demo

Answer 4

据我所知，50px应该是一个字符串：

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

编辑：小提琴：http://jsfiddle.net/tjp5m/7/

更新（见评论）：

  $(document).ready(function(){

    $('#back').hover(function(){ 
        $('#up').animate(function(){ // remove the function(), you're passing an object!
            height:50px; // it has to be '50px' and you have to remove ;
        },1000); 
    });

   });

使用animate（）从底部向上滑动

4 个答案:

Demo Fiddle

Demo