logo标签列表

jQuery悬停滑动？

javascriptjquerycssjquery-slide-effects
3

请查看底部的修订版

好的，这里是问题所在。我有一个包含div的li，我正在尝试悬停在li上以使div向上滑动到视图中。

以下是HTML代码：

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

现在我的CSS代码如下:

#one div { display: none; }

这是我的JavaScript代码：

$(document).ready(function() {

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

});

我知道我可以使用CSS伪类:hover来实现弹出效果，但是如果我想要一个滑动效果，我想干脆就全部用JS来实现。第一个问题是这个方法不起作用 :|，一旦我让它正常显示，我想为它添加一个滑动效果，但我不确定这是否是正确的方法。

谢谢大家！

修改后：

新JavaScript代码：

$(document).ready(function() {

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

});

这个可以工作！虽然它是从顶部下来的，但是我本打算让它从底部升起。

5个回答
4

问题的一部分原因是在 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/

是的！我知道有一些解决方法，但我只是想不起来了。谢谢。 - uurrnn
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();
    });

});

需要稍微调整一下才能让它看起来好看，但它确实可以滑动。
编辑：
这里有一个描述如何使用动画来实现你想要的效果的网站。

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

这并没有解决第一个问题，即无法让jquery在悬停时显示div。 - uurrnn
稍等，我会仔细查看。 - griegs
实际上，我忘记链接jQuery了。过一秒钟我会进行编辑并提出新问题。 - uurrnn
刚刚加入了jQuery。我同时在处理两个网站，忘记在第二个网站中添加它了。请查看原帖获取新问题。我会添加您的代码并查看发生了什么。 - uurrnn
我目前正在使用您的代码，除了slideToggle()。有没有办法改变它滑动的方向？ - uurrnn
显示剩余2条评论
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>

试一下

1

你可以像这样做

$(div).show("slide", { direction: "down" }, 1000)

甚至使用动画属性也可以解决你的问题

更多内容请看这里

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

1

首先，您需要创建一个最小宽度和最小高度或类似的东西，因为li当前没有可悬停的内容（只需在li上添加一个红色边框，您就会明白我在说什么）。

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

我为演示目的添加了一个背景颜色。

这里有一个小演示： http://jsfiddle.net/R9A3G/

如果您正在寻找特定的动画效果，则可能需要使用一些CSS技巧以及jQuery.animate()。

我在我的版本中有这个li，只是忘记包含它了。我现在使用slideToggle()使其正常工作，这正是我想要的方式。当你离开这个li时，它会从视野中滑回去。有没有办法将其更改为从li底部滑动而不是从顶部滑动？ - uurrnn
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接