jQuery 悬停滑动？

检查底部是否有修订版

好吧，问题就到这里了。我有一个li with a div在里面，我试图将鼠标悬停在li得到div向上滑动到视图中。

这是 HTML：

<li id="one">
    <div>
        <h4>title</h4>
        <p>description</p>
    </div>
</li>

现在我的CSS中有这个：

#one div { display: none; }

这是我的 JS 的：

$(document).ready(function() {

    $('#one').hover(function() {
        $('#one > div').css({ display : 'block' });
    });

});

我知道我可以使用 CSS 伪:hover让它弹出，但我想如果我想要一个幻灯片效果那么我最好用JS来做。第一个问题是这不起作用：|。一旦我让它显示出来，我想为其添加幻灯片效果，但我不确定这是否是实现这一目标的正确方法。

谢谢各位/女士们

revised

新的JavaScript

$(document).ready(function() {

    $('#one').hover(function () {
        $('#one > div').slideToggle();
    });

});

这有效！虽然它是从上往下的，但我打算让它从下往上。

部分问题在于slideUp()在 jQuery 中hides选择和slideDown() shows选择。要让元素滑入视图，您需要自己做.animate().

CSS:
  #one {
    overflow: hidden;
    position: relative;
    border: 1px solid gray;
    height: 40px;
  }

  #one div { 
    position: absolute;
    bottom: -100%;
  }

jQuery:
  $('#one').hover(
    function() {
        $(this).find('div').animate({
            bottom: '0%'
        }, 'fast' );
    },function() {
        $(this).find('div').animate({
            bottom: '-100%'
        },'fast');
    }
  );

js小提琴：http://jsfiddle.net/blineberry/mrzqK/ http://jsfiddle.net/blineberry/mrzqK/