jQuery悬停幻灯片？

好的，这是问题所在。我有一个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(); 
    }); 

});

这工作！虽然它从顶端下来，我计划让它从底部出现。

来源

2011-10-13 uurrnn

部分在于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-14 00:29:37 Brent

现在就试试这个。看起来是对的。 – uurrnn

是的！我知道有一些工作要做，但我不记得了。谢谢 – uurrnn

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

});

需要一点tweeking，以使它看起来不错，但它确实下滑。

编辑

这里是介绍如何使用动画做你想要什么网站。

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

来源

2011-10-13 23:57:16 griegs

这不，没有能够得到jQuery的悬停时显示的股利解决第一个问题。 – uurrnn

继续。我会仔细看看 – griegs

其实T_T我忘了链接jQuery。将在一秒内编辑新的问题。 – uurrnn

你可以做这样的事情

$（DIV）。节目（ “幻灯片”，{方向： “向下”}，1000）

甚至有生产权可以解决您的问题

更这里

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

来源

2011-10-13 23:59:08 Ifewalter

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

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

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

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

如果你正在寻找一个特定的动画，你可能需要做一些CSS技巧与jQuery .animate沿（）。问题的

来源

2011-10-14 00:14:19

我有我的版本中的李，只是忘了包括。我现在用slideToggle（）工作，这正是我想要的。当你离开李时，它会远离视线。有没有办法改变它，让它从李的底部而不是顶部滑动？ – uurrnn

<!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-14 00:43:48

jQuery悬停幻灯片？

回答

相关问题