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

Posted 2023-03-06

【中文标题】用于一页引导设计的 JQuery/CSS 事件/动画。 （点击和滚动）

【英文标题】：JQuery/CSS Events/Animations for one page bootstrap design. (on Click & On scroll)

【发布时间】：2014-04-28 08:08:29

【问题描述】：

我有兴趣在用户单击或滚动浏览我的页面时创建动画。 （在点击导航中的链接和滚动时触发动画很重要） 我目前正在使用引导程序裸骨模板（一页滚动）。 我已经包含了最初在文件中用于单击滚动事件的 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

【问题讨论】：

可以发布html 和css 吗？谢谢。

创建一个小提琴，以便轻松帮助您

这是一个包含我的网站的链接。 wetransfer.com/downloads/…

你反对使用 jQuery 插件来做这件事吗？ Panel Snap

【参考方案1】：

//内部文件准备好

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

// .js 文件的后面

function doStuff()

  // triggers both the click and scroll event