3

检查底部是否有修订版

好了，问题来了。我有li一个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 psuedo:hover来让它弹出，但我想如果我想要一个幻灯片效果，那么我还不如在 JS 中完成。第一个问题是这不起作用：|。一旦我让它出现，我想给它添加一个幻灯片效果，我不确定这是否是正确的方法。

谢谢伙计们/姑娘们

修改

新的 JavaScript

$(document).ready(function() {

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

});

这行得通！虽然它是从顶部下来的，我打算让它从底部出来。

4

5 回答 5

4

部分问题是slideUp()在 jQuery 中隐藏了选择并slideDown() 显示了选择。要让一个元素滑入视图，你需要自己做.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');
    }
  );

jsFiddle：http: //jsfiddle.net/blineberry/mrzqK/

于 2011-10-14T00:29:37.500 回答
2

使用 jQueryslideUp或jQuery 怎么样fadeIn？

http://api.jquery.com/slideToggle/

http://api.jquery.com/slideDown/

http://api.jquery.com/slideUp/

这段代码对我有用。

$(document).ready(function () {

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

});

需要稍微调整一下才能让它看起来不错，但它确实会滑下来。

编辑

这是一个描述如何使用动画来做你想做的事情的网站。

http://www.learningjquery.com/2009/02/slide-elements-in-different-directions

于 2011-10-13T23:57:16.150 回答
1

你可以做这样的事情

$(div).show("幻灯片", {方向: "向下" }, 1000)

甚至动画属性也可以解决您的问题

更多在这里

http://docs.jquery.com/UI/Effects/Slide api.jquery.com/animate/

于 2011-10-13T23:59:08.703 回答
1

首先你需要创建一个最小宽度和最小高度或其他东西，因为 li 目前没有任何东西可以悬停在上面。（只是让 li 有存在感的东西在上面放了一个红色边框，你会看到我是什么谈论。）

其次，我认为您想使用 slideDown() ... 我认为 slideUp() 会使它消失，对吗？

我添加了一个 bg 颜色用于演示目的。

听到一个小演示：http: //jsfiddle.net/R9A3G/

如果你正在寻找一个特定的动画，你可能需要使用 jquery .animate() 来做一些 css 技巧。

于 2011-10-14T00:14:19.710 回答
1 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <style>#one div { display: none; }</style>
<head>
  <title></title>
</head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
   <script>
   $(document).ready(function() {

    $('#one').hover(function() {

      $("#one").find("div").slideDown("slow");
    });
    $('#one').mouseout(function() {

      $("#one").find("div").slideUp("slow");
    });
});
</script>

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

</html>

试试这个

于 2011-10-14T00:43:48.063 回答