Question

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

与以下网站导航链接类似：

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/

Answer 1

$("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/

文本悬停jquery动画

1 个答案: