Question

我用jQuery把一个动画导航栏放在一起，看起来像我想要完成的很多js，有人知道这种效果更优雅的解决方案吗？

直播网站：

的jQuery

$(document).ready(function() {

    $("#topnav li").prepend("<span></span>"); 

    $("#topnav li").each(function() { 
        var linkText = $(this).find("a").html(); 
        $(this).find("span").show().html(linkText); 
    }); 

    $("#topnav li").hover(function() {  
        $(this).find("span").stop().animate({
            marginTop: "-45" 
        }, 250);
    } , function() { 
        $(this).find("span").stop().animate({
            marginTop: "0"  
        }, 250);
    });

});

Answer 1

只需使用图片精灵和background-position在CSS中完成。这将削减所有jQuery。

Answer 2

我发现你的代码根本不复杂或不优雅但是，如果您想要一种不同的方法，可以尝试使用css3动画 Here is a live example你的效果根本没有js。
希望它有所帮助。

Answer 3

你可以跳过1循环：

 $(document).ready(function() {

    $("#topnav li").html(function(){
        var $obj= $(this);
        $obj.prepend('<span>'+$obj.find('a').html()+'</span>');
    });



    $("#topnav li").hover(function() {
        $(this).find("span").stop().animate({
            marginTop: "-45"
        }, 250);
    }, function() {
        $(this).find("span").stop().animate({
            marginTop: "0"
        }, 250);
    });

});

Click Here

但我同意 Andrew Peacock ，我会在精灵中使用相同的动画，留下相同的文字并改变背景位置。因此，您将跳过1个循环来克隆文本

jQuery可能臃肿的代码

3 个答案: