Question

检查底部是否有修订版

好的，这是问题所在。我的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伪装:hover使其弹出，但我想如果我想要一个幻灯片效果，那么我不妨在JS中做到这一切。第一个问题是这不起作用：|。一旦我得到它只是出现我想要添加幻灯片效果，我不确定这是否是正确的方法来做到这一点。

谢谢你们/女士们

订正

新JavaScript

$(document).ready(function() {

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

});

这个有效！虽然它从顶部降下来，但我计划让它从底部出现。

Answer 1

部分问题是jQuery 中的slideUp()隐藏选择，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/

Answer 2

如何使用jQuery slideUp或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();
    });

});

需要一些推文才能让它看起来不错，但确实会滑落。

修改

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

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

Answer 3

你可能会做这样的事情

$（div）.show（“slide”，{direction：“down”}，1000）

甚至animate属性都可以解决您的问题

更多

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

Answer 4

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

其次我认为你想要slideDown（）......我认为slideUp（）会让它消失吗？

我为演示目的添加了一种bg颜色。

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

如果你正在寻找一个特定的动画，你可能需要做一些css技巧和jquery .animate（）。

Answer 5

<!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>

尝试这个

jQuery悬停在幻灯片上？

5 个答案: