文本悬停jquery动画

我正在尝试为导航链接完成文本悬停效果，在mouseenter上，链接中的文本快速滑动（短暂消失），文本更改，然后滑下。在mouseleave上，原始文本返回。文本悬停jquery动画

一下下面的网站导航链接类似产品具有：

http://wrapbootstrap.com/preview/WB08808B5

这是我试过，好像火不止一次的mouseenter和上面所描述的动画从未进行：

<div class="navbar-right" > 
    <ul class="nav navbar-nav" > 
     <li><a href="#" class="link">Cars</a><span class="nav_anim">to drive</span></li> 
     <li><a href="#" class="link">Wood</a><span class="nav_anim">to chop</span></li> 
     <li><a href="#" class="link">steak</a><span class="nav_anim">to eat</span></li> 
    </ul> 
</div>

JQuery的

var orig, anim; 
$('.link').mouseenter(function() { 
    orig = $(this).text(); 
    anim = $(this).parent().children('.nav_anim').text(); 
    $(this).stop(true,false).slideUp(300).text(anim).slideDown(300); 
}).mouseleave(function(){ 
    $(this).stop(true,false).slideUp(300).text(orig).slideDown(300); 
});

的jsfiddle：http://jsfiddle.net/f0raekme/1/

来源

2014-11-02 AnchovyLegend

为什么不能只用CSS做呢？（转换） – vsync 2014-11-02 14:01:34

该网站在其中有很多效果。你的问题不清楚。此外，如果该网站死亡，此问题将过时... – 2014-11-02 14:16:13

@TJ相应编辑。 – AnchovyLegend 2014-11-02 14:26:44

$("ul li").hover(
    function() { 

     first = $(this).children('a.link'); 


     $(first).animate({ 
      marginTop: "-20px", 
      opacity: '0' 

     }, 300); 

    }, 



    function() { 

     $(first).animate({ 
      marginTop: "0px", 
      opacity: '1' 
     }, 300); 

    } 



);

而且，略有变化的CSS：（固定的高度）...

li { 
    display:block-inline; 
    float:left; 
    border:1px solid grey; 
    width:100px; 
    height:20px; 
    overflow:hidden; 
    list-style-type:none; 
    text-align:center; 
}

演示：http://jsfiddle.net/f0raekme/3/

来源

2014-11-02 14:57:17 sinisake

这是很好，如果你格式化的答案...只是一个建议.. :) – 2014-11-02 15:04:21

文本悬停jquery动画

回答

相关问题