jquery 特效用jQuery动画来做特效,怎么防止多次点击动画重复的问题

编程之家 2023-11-06 67次浏览

大家好，关于jquery 特效很多朋友都还不太明白，不过没关系，因为今天小编就来为大家分享关于用jQuery动画来做特效,怎么防止多次点击动画重复的问题的知识点，相信应该可以解决大家的一些困惑和问题，如果碰巧可以解决您的问题，还望关注下本站哦，希望对各位有所帮助！

jquery 页面跳转动画效果

HTML结构

该页面切换特效的HTML结构使用一个<main>元素来作为页面的包裹元素，div.cd-cover-layer用于制作页面切换时的遮罩层，div.cd-loading-bar是进行ajax加载时的loading进度条。

<main>

<div>

<h1>Page Transition</h1>

</div>

</main>

CSS样式

该页面切换特效中使用body::before和body::after伪元素在页面切换过程中创建两个遮罩层来遮住页面内容。它们的定位是固定定位，高度等于50vh，宽度为100%。默认情况下，使用CSS transform属性将它们隐藏起来（translateY(-100%)/translateY(100%)）。当用户切换页面的时候，这些元素被移动回视口当中（通过在<body>元素上添加.page-is-changing class）。

下面的图片演示了这个过程：

页面切换特效

body::after, body::before{

/* these are the 2 half blocks which cover the content once the animation is triggered*/

height: 50vh;

width: 100%;

position: fixed;

left: 0;

}

body::before{

top: 0;

transform: translateY(-100%);

}

body::after{

bottom: 0;

transform: translateY(100%);

}

body.page-is-changing::after, body.page-is-changing::before{

transform: translateY(0);

}

页面切换时，页面内容的淡入淡出效果是通过改变div.cd-cover-layer的透明度实现的。它覆盖了.cd-main-content元素，并具有相同的背景色，然后在<body>被添加.page-is-changing class的时候，将透明度从0修改为1。

Loading进度条使用.cd-loading-bar::before伪元素来制作。默认它被缩小（scaleX(0)）和transform-origin: left center。当页面切换开始时它被使用scaleX(1)放大会原来的尺寸。

.cd-loading-bar{

/* this is the loading bar- visible while switching from one page to the following one*/

position: fixed;

height: 2px;

width: 90%;

}

.cd-loading-bar::before{

/* this is the progress bar inside the loading bar*/

position: absolute;

left: 0;

top: 0;

height: 100%;

width: 100%;

transform: scaleX(0);

transform-origin: left center;

}

.page-is-changing.cd-loading-bar::before{

transform: scaleX(1);

}

特效中平滑的过渡效果使用CSS Transitions来实现。每一个动画元素都被添加了不同的transition-delay，以实现不同的元素动画顺序。

JAVASCRIPT

该页面切换特效中在链接上使用data-type="page-transition"属性，用于触发页面切换事件。当插件检测到用户点击事件，changePage()方法将被执行。

$('main').on('click','[data-type="page-transition"]', function(event){

event.preventDefault();

//detect which page has been selected

var newPage=$(this).attr('href');

//if the page is not animating- trigger animation

if(!isAnimating) changePage(newPage, true);

});

这个方法会触发页面切换动画，并通过loadNewContent()方法加载新内容。

function changePage(url, bool){

isAnimating= true;

// trigger page animation

$('body').addClass('page-is-changing');

//...

loadNewContent(url, bool);

//...

}

当新的内容被加载后，会替代原来<main>元素中的内容。.page-is-changing class被从body中移除，新加载的内容会被添加到window.history中（使用pushState()方法）。

function loadNewContent(url, bool){

var newSectionName='cd-'+url.replace('.html',''),

section=$('<div class="bchome-0b78-0901-0968-2ec5 cd-main-content'+newSectionName+'"></div>');

section.load(url+'.cd-main-content>*', function(event){

// load new content and replace<main> content with the new one

$('main').html(section);

//...

$('body').removeClass('page-is-changing');

//...

if(url!= window.location){

//add the new page to the window.history

window.history.pushState({path: url},'',url);

}

});

}

为了在用户点击浏览器的回退按钮时触发相同的页面切换动画效果，插件中监听popstate事件，并在它触发时执行changePage()函数。

$(window).on('popstate', function(){

var newPageArray= location.pathname.split('/'),

//this is the url of the page to be loaded

newPage= newPageArray[newPageArray.length- 1];

if(!isAnimating) changePage(newPage);

});

瀑布流布局jquery特效代码怎么用

楼主您好

引入infinitescroll

页面元素

</div>

</div>

<a></a>

</div>

初始化

var navigationUrl="xxxx?pageNo=1";

$("#navigation a").attr("href", navigationUrl);

$.ajax({

url:'xxxx',

type:'post',

dataType:'json',

success: function(items){

var html= successCallBack(items);//渲染每一个瀑布流块

$('#container').html(html);

error: function(){

alert('加载失败');

}

});

初始化方法调用

$('#container').infinitescroll({

navSelector:"#navigation",//导航的选择器，会被隐藏

nextSelector:"#navigation a",//包含下一页链接的选择器

itemSelector:".block",//你将要取回的选项(内容块)

debug: true,//启用调试信息

animate: true,//当有新数据加载进来的时候，页面是否有动画效果，默认没有

extraScrollPx: 150,//滚动条距离底部多少像素的时候开始加载，默认150

bufferPx: 40,//载入信息的显示时间，时间越大，载入信息显示时间越短

errorCallback: function(){

//alert('error');

},//当出错的时候，比如404页面的时候执行的函数

localMode: true,//是否允许载入具有相同函数的页面，默认为false

dataType:'json',//可以是json

template: function(items){

itemsTemp= items;

return successCallBack(items);

loading:{

img:'${ctx}/images/loading.gif',

msgText:"加载中...",

finishedMsg:'没有新数据了...',

selector:'.loading'//显示loading信息的div

}

}, function(){

});

用jQuery动画来做特效,怎么防止多次点击动画重复的问题

1、在你的点击事件中加上一个判断，假设产生动画效果目标的是#aa这个节点，那么你要加上这个判断

if(!$("#aa").is(":animated")){

//执行你的操作

}

他会确保你的动画只会在上一个动画结束后才能产生，可以保持动画的完整性，但是连续点击时会有反映迟钝的感觉

2、$("#aa").stop(true,false).animate({...},1000);

这个则是会强制你的上一动画立即结束并到达动画执行结束时状态同时来运行下一次动画，会造成动画脱节不太美观，但是反应迅速

说到这里我们解释下stop（）这个函数的用法。

stop是jQuery中用于控制页面动画效果的方法。运行之后立刻结束当前页面上的动画效果。

stop在新版jQuery中添加了2个参数：

第一个参数的意思是是否清空动画序列，也就是stop的是当前元素的动画效果还是停止后面附带的所有动画效果，一般为false，跳过当前动画效果，执行下一个动画效果；

第二个参数是是否将当前动画效果执行到最后，意思就是停止当前动画的时候动画效果刚刚执行了一般，这个时候想要的是动画执行之后的效果，那么这个参数就为true。否则动画效果就会停在stop执行的时候

3、第三种方法应用就需要设置一个判断是否处于动画的标志，一般是一个点击事件执行N多个步骤的动画之后然后跳到下一个动画。

var flag= false;

function aa(){

if(flag) return;//这里指当这个标志flag为真的时候，直接返回，不执行当前的这个动画。

flag=true;//这里是在执行这个动画的最开始的时候把标志flag设置为真，在这个动画没执行完之前这个值一直为真，当下次运行这个函数的时候，由于flag值为真，也不会执行。必须等到这个函数执行完之后才会再次执行这个动画。

……………….

………………..

$(“#aa”).animated({“left”:”100″},1000,function(){

………………….

flag=false;//回到最初始状态，也是也表示这一轮动画执行完毕。

});

}

OK，关于jquery 特效和用jQuery动画来做特效,怎么防止多次点击动画重复的问题的内容到此结束了，希望对大家有所帮助。

linuxbind linuxbind是什么linuxbind java9(jvmiz9是啥意思)

jquery 特效 用jQuery动画来做特效,怎么防止多次点击动画重复的问题

jquery 页面跳转动画效果

瀑布流布局jquery特效代码怎么用

用jQuery动画来做特效,怎么防止多次点击动画重复的问题

jquery 特效用jQuery动画来做特效,怎么防止多次点击动画重复的问题