JQuery/CSS事件/动画用于一页引导设计。(点击和滚动)

Question

我对创建动画感兴趣，因为用户可以点击或滚动我的页面。(重要的是动画会触发在导航和滚动中的链接)，我目前使用的是一个引导裸骨模板(一个页面滚动)。我已经包含了Javascript，最初是在文件中为单击滚动事件。

$(function() {
$('.page-scroll a').bind('click', function(event) {
    var $anchor = $(this);
    $('html, body').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top
    }, 1500, 'easeInOutExpo');
    event.preventDefault();
});
});

任何帮助都会很感激，因为当我说到这件事的时候，我几乎是迷路了！我设法在登陆页面上的纯CSS中创建了一个加载淡出效果。如果可能的话，我想继续使用纯CSS。

使用下面的javascript，我设法在about页面上创建了一个淡出效果，问题是当我再次单击about链接时，文本就消失了。我希望文本保留在用户单击有关链接后，并被带到页面的那个部分。

$(function() {  
$("#btn").click(function() {  
$(".box2").toggleClass("box2-change");  

});  

});  

关于进一步的参考，这里是我使用的模板的下载/演示。http://startbootstrap.com/scrolling-nav

Answer 1

//内部文件就绪

$("#yourElement").on('click', doStuff);
$("#yourElement").on('scroll', doStuff);

//稍后在.js文件中

function doStuff()
{
  // triggers both the click and scroll event

}