jQuery animate正在改变文本/不是动画背景

时间:2015-03-17 15:36:48

标签: javascript jquery css animation jquery-animate

我们有一个页面,显示用户用于浏览页面的标题/按钮的动画。

我们遇到的问题是鼠标悬停时的按钮不会改变背景,但它会改变文本的颜色。

我们想要的是文本为白色,按钮本身与标题/ subNav2的颜色相匹配

jQuery。

function headerChange($stopOnColor) {
    //remove all classes at start
    $('#siteNav').removeClass('change195369 changeBEBD80 change708D81 change70547A changeD49A4B');
    $('.subNav2 a').removeClass('change195369 changeBEBD80 change708D81 change70547A changeD49A4B');
    $('.subNav h1 a').removeClass('change195369 changeBEBD80 change708D81 change70547A changeD49A4B');

    $colBlue = '#195369'; //rbga(25, 83, 105, 0.8)
    $colMustard = '#BEBD80'; //rbga(190, 189, 128, 0.8)
    $colDirtyGreen = '#708D81'; //rbga(112, 141, 129, 0.8)
    $colPurple = '#70547A'; //rbga(112, 84, 122, 0.8)
    $colOrange = '#D49A4B'; //rbga(212, 154, 75, 0.8)
    var colorArray = [$colBlue, $colMustard, $colDirtyGreen, $colPurple, $colOrange];

    if (!$stopOnColor){
        colorArray.reverse();
        var interval = setInterval(function(){ 
            if(colorArray.length == 0){
                clearInterval(interval);
                return;
            }
            var entry = colorArray.pop();
            var oldstr = entry;
            var str = oldstr;
            str = /#(.+)/.exec(str)[1];

            $('header#header-top').animate({"background-color": entry}, 1000, function(){
                $('#siteNav').addClass('change' + str);
                //$('.navbar #siteNav .nav li.active a').animate({"color": $stopOnColor}, 1000);
                //$('.subNav2 a').addClass('change' + str);
                $('.subNav2 a').animate({"color": entry}, 1000);
                //$('.subNav h1 a').addClass('change' + str);
                $('.subNav h1 a').animate({"color": entry}, 1000);
                if (colorArray.length == 0){
                    setTimeout(function(){
                        headerChange();
                    }, 5000);
                }
            });
            $('.subNav2 a').animate({"color": entry}, 1000);
            $('.subNav h1 a').animate({"color": entry}, 1000, function(){
//                $(this).addClass('change' + str);
            //to do, fix override for color on hover. 
            });

        }, 5000);
    }
    else {
        var oldstr = $stopOnColor;
        var str = oldstr;
        str = /#(.+)/.exec(str)[1];

        $('header#header-top').animate({"background-color": $stopOnColor}, 1000);
        $('.navbar #siteNav .nav > .active > a').animate({"color": $stopOnColor}, 1000);
        $('.subNav2 a').addClass();
        $('.subNav h1 a').addClass('change' + str);
        $('#siteNav').addClass('change' + str);
    }
};

CSS

.subNav a {
    color: #353535;
    background: none;
    text-shadow: none;
    text-shadow: 0;
    border-color: none;
    border: solid;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    text-transform: uppercase;
    padding: 5px 12px;
    width: 220px;
    max-width: 220px;
    max-height: 76px;
    display: block;
    margin: 0 auto;

}
.subNav a i {
    opacity: 0;
    position: relative;
}
.subNav a i.fa-angle-right {
    left: -15px;
}
.subNav a i.fa-angle-left {
    left: 15px;
}
.subNav a:link, .subNav a:visited, .subNav a:focus {
    text-decoration: none;
}  
.subNav a:hover {
    text-decoration: none;
    background-color: #353535;
    color: #FFF;
}
.subNav a.change195369 {border-color: #195369; color: #195369;}
.subNav a.change195369:hover {background-color: #195369; color: #FFF;}
.subNav a.changeBEBD80 {border-color: #BEBD80; color: #BEBD80;}
.subNav a.changeBEBD80:hover {background-color: #BEBD80; color: #FFF;}
.subNav a.change708D81 {border-color: #708D81; color: #708D81;}
.subNav a.change708D81:hover {background-color: #708D81; color: #FFF;}
.subNav a.change70547A {border-color: #70547A; color: #70547A;}
.subNav a.change70547A:hover {background-color: #70547A; color: #FFF;}
.subNav a.changeD49A4B {border-color: #D49A4B; color: #D49A4B;}
.subNav a.changeD49A4B:hover {background-color: #D49A4B; color: #FFF;}

what it looks like now How we want it

怎么样 我们想要它

0 个答案:

没有答案