Question

我使用scrolling-nav-js Scrolling nav动画填充并将我的导航栏修复到我的页面顶部，我想给导航栏一个微妙的不透明度动画。如何添加转换以更改不透明度属性？

我在JS和CSS文件中有以下代码：

//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
    if ($(".navbar").offset().top > 50) {
        $(".navbar-fixed-top").addClass("top-nav-collapse");
    } else {
        $(".navbar-fixed-top").removeClass("top-nav-collapse");
    }
});

//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
    $('a.page-scroll').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1500, 'easeInOutExpo');
        event.preventDefault();
    });
});

@media(min-width:767px) {
    .navbar {
        padding: 20px 0;
        -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
        -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
        transition: background .5s ease-in-out,padding .5s ease-in-out;
    }

    .top-nav-collapse {
        padding: 0;
    }
}

Answer 1

没关系:)添加这个是完美的。

 <img src="../webTract/images/billyGraham.png">
 <img src="webTract/images/billyGraham.png">
 <img src="images/billyGraham.png">

和

transition: background .5s ease-in-out,padding .5s ease-in-out, opacity .5s ease-in-out,opacity .5s ease-in-out;

Bootstrap navbar opacitiy使用scrolling-nav js

1 个答案: