0

我在http://www.threecell.com/demo上设置了一个演示站点。目前，菜单的淡入淡出翻转状态是使用 CSS3 设置的。我希望获得有关使用 Jquery 复制动画效果的帮助，以便该站点可以在 IE9 中显示。

老实说，我不确定最简单和最好的 Jquery 脚本是否可以用于看似简单的事情。这是我尝试使用的代码，但最终需要帮助才能将其与现有的 WordPress 主题集成。在这方面的任何帮助将不胜感激。

var hoverColour = "green";

$(function(){
    $("a.hoverBtn").show("fast", function() {
        $(this).wrap("<div class=\"hoverBtn\">");
        $(this).attr("class", "");
    });

    //display the hover div
    $("div.hoverBtn").show("fast", function() {
        //append the background div
        $(this).append("<div></div>");

        //get link's size
        var wid = $(this).children("a").width();
        var hei = $(this).children("a").height();

        //set div's size
        $(this).width(wid);
        $(this).height(hei);
        $(this).children("div").width(wid);
        $(this).children("div").height(hei);

        //on link hover
        $(this).children("a").hover(function(){
            //store initial link colour
            if ($(this).attr("rel") == "") {
                $(this).attr("rel", $(this).css("color"));
            }
            //fade in the background
            $(this).parent().children("div")
                .stop()
                .css({"display": "none", "opacity": "1"})
                .fadeIn("slow");
            //fade the colour
            $(this) .stop()
                .css({"color": $(this).attr("rel")})
                .animate({"color": hoverColour}, 350);
        },function(){
            //fade out the background
            $(this).parent().children("div")
                .stop()
                .fadeOut("slow");
            //fade the colour
            $(this) .stop()
                .animate({"color": $(this).attr("rel")}, 250);
        });
    });
});

此脚本的样式位于下方：

.hoverBtn {
    position:       relative;
    float:          left;
    background:     black url(images/navBG.png) repeat-x 0 0 scroll;
}
.hoverBtn a {   
    position:       relative;
    z-index:        2;
    display:        block;
    width:          100px;
    height:         30px;
    line-height:    30px;
    text-align:     center;
    font-size:      1.1em;
    text-decoration:    none;
    color:          blue;
    background:     transparent none repeat-x 0 0 scroll;
}
.hoverBtn div {
    display:        none;
    position:       absolute;
    z-index:        1;
    top:            0px;
    background:     white url(images/navHover.png) repeat-x 0 0 scroll;
    color: black;
}

同样，我愿意使用任何有效的脚本。上面的脚本是在 2009 年发布的，所以虽然它们可能仍然有效，但我不介意使用最新的。谢谢，

4

1 回答 1

0

您可以将此功能用于 wordpress 站点中的菜单。

function home_top_menu()
{
    var currentParent = '';
    var pos = '';
    jQuery("#.menu ul").css({display: "none"}); // Opera Fix
    jQuery(".menu li").hover(function(){
        jQuery(this).find('ul:first').css({visibility: "visible",display: "none"}).show(268);
            },function(){
            jQuery(this).find('ul:first').css({visibility: "hidden"});
    });
    jQuery(".menu .sub-menu").hover(function(){
        currentParent = $(this).parent('li').attr('class');
        pos = currentParent.indexOf('current-menu-parent',0);
        $(this).parent('li').addClass('current-menu-parent');
    },function(){
        if(pos == '-1')
        $(this).parent('li').removeClass('current-menu-parent');
    });
    jQuery('#accessMenu ul.menu li a').hover(function(){
        jQuery(this).css('background','none');
        jQuery(this).find('span').css('background','none');                 
    });
}
于 2013-08-24T10:24:18.123 回答