jQuery悬停滑动? [英] jQuery hover to slide?

问题描述

检查底部的修订版

好的，这是问题.我有一个li，里面有一个div，我想将鼠标悬停在li上，以使div滑入视图.

Alright, here's the issue. I have a li with a div inside, and I'm trying to hover the li to get the div to slide up into view.

以下是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中完成所有操作.第一个问题是这不起作用:|.一旦它显示出来，我想在其中添加幻灯片效果，而且我不确定这是否是正确的方法.

I know I could just used CSS psuedo :hover to make it pop up, but I thought if I wanted to to a slide effect then I might as well do it all in JS. The first problem is this isn't working :|. Once I get it to just show up I want to add a slide effect to it, and I'm not sure if this is the right way to approach doing that.

感谢男生/女友

修订版

新JavaScript

$(document).ready(function() {

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

});

这有效！尽管它从顶部下降，但我计划从底部开始.

This works! Although it comes down from the top, and I planned on having it come up from the bottom.

推荐答案

部分问题是jQuery中的slideUp() 隐藏选择内容和slideDown() 显示选择.要使元素向上滑动，您需要执行自己的.animate().

Part of the problem is that slideUp() in jQuery hides the selection and slideDown() shows the selection. To have an element slide up into view, you need to do your own .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/

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

这篇关于jQuery悬停滑动?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！