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

Question

我有兴趣在用户点击或滚动浏览我的页面时创建动画。 (动画在点击导航和滚动中的链接时触发很重要)我目前使用的是 bootstrap bare bones 模板(一页滚动)。我已经包含了最初在单击滚动事件的文件中的 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 在“关于”页面上创建淡入淡出效果，问题是当我再次单击“关于”链接时，文本消失了。我希望在用户单击“关于”链接并转到页面的该部分后保留文本。

$(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

}