您的位置:时时app平台注册网站 > 彩世界网址 > jQuery中animate动画第二次点击事件没反应_jquery_脚

jQuery中animate动画第二次点击事件没反应_jquery_脚

2019-12-06 10:57

top:“-=300px”,那样第叁回点击时会在率先次点击后的岗位上继续移动-300px。

jQuery中animate动漫第二遍点击事件没影响

   那篇小说首要介绍了jQuery中animate动画第二回点击事件没影响的解除措施,特其余实用,有亟待的同伙能够参照下

  用animate做点击翻页动漫时意识第3回点击事件动漫没反应,而首先次点击有动漫效果,代码如下:

   代码如下:

  $(".page").stop().animate({top:“-300px”}, 800, 'easeInOutExpo');

  第2回点击事件动画没影响的由来:top是page成分顶端相与其父成分顶端的离开,第一遍点击后,page成分顶上部分已经移动到距其父成分最上部-300px的职位,首次点击时的实际不是page在运动后的地方一而再接二连三t移动-300px,而是当前的岗位据其父元素最上部-300px。明显第贰遍大器晚成度移动到top:-300px的职位,第四回的top:-300px移动间隔为0,所以没影响。

  撤消办法:

   代码如下:

  $(".page").stop().animate({top:“-=300px”}, 800, 'easeInOutExpo');

  top:“-=300px”,这样第叁遍点击时会在第一回点击后的岗位上继续移动-300px。

  假诺动画移动的离开是变量,就无法用“-=变量名”来写了:

  ?

1

2

3

4

5

6

7

 

function down() {

var page_h=$(".page").height(); //687

var page_top=parseInt($(".page").css("top")); //0

var move=wrap_top page_h;

$(".page").stop().animate({top:move}, 800, 'easeInOutExpo');

};

  var page_h=$(".page"卡塔尔(英语:State of Qatar).height(卡塔尔国;获取page的冲天并赋值给page_h,得到的值是数值;

  var page_top=parseInt($(".page"卡塔尔国.css("top"卡塔尔卡塔尔;获取当前page最上端到其父元素顶端的间隔并赋值给page_top,(parseInt:去掉"PX");

  var move=wrap_top page_h;计算移动间距;

  那样每一遍动漫都会另行赢得“当前page最上部到其父成分最上部的相距”。

  注意:$(".page"卡塔尔.height(卡塔尔(英语:State of Qatar)的值是不带px单位的,$(".page"卡塔尔国.css("top"卡塔尔(قطر‎卡塔尔国的值是带px单位的,要求parseInt将单位px像素单位删除技艺猜度。

  以上所述就是本文的全体内容了,希望我们能够赏识。

        注< >**:越多特出教程请关怀帮客之家编制程序**

那篇小说首要介绍了jQuery中animate动漫第一回点击事件没反应的解决格局,特别的实用,有亟待的小...

接下来再将大增或调整和缩短了的x,y重新赋值给成分的left以致top属性

上述所述正是本文的全部内容了,希望大家能够赏识。

咱俩能够了解,八个反应计时器都以功用在同叁个因素上边,我们得以将每一回实行的放大计时器的ID绑定在要素上,下叁次试行新的电火花计时器时将成分本人的测量时间的装置clear(也便是上贰个机械漏刻),再将此番电磁打点计时器ID绑定就可以。

留心:$的值是不带px单位的,$的值是带px单位的,需求parseInt将单位px像素单位删除才干揣度。

好了,让大家最初吧。

那样每便动漫都会再次拿到“当前page最上部到其父成分顶上部分的间隔”。

我们的逻辑正是:每间隔意气风发段时间,获取贰遍成分当前地方,让要素移动二个微小的偏离,若是当前职分等于目的地方,大家就退出setInterval函数,假诺不等于,则再度推行代码块a。

其次次点击事件动漫没影响的原故:top是page成分最上端相与其父成分最上端的离开,第二遍点击后,page成分顶上部分已经移动到距其父成分最上端-300px的职位,第三回点击时的实际不是page在移动后的地点再而三t移动-300px,而是当前的岗位据其父成分顶上部分-300px。显明第二遍风姿罗曼蒂克度移动到top:-300px的职位,第贰回的top:-300px移动间隔为0,所以没影响。消除办法:

后天的代码如下:

借使动漫移动的相距是变量,就无法用“-=变量名”来写了:

敲黑板,划重点。

复制代码 代码如下:$.animate({top:“-=300px”}, 800, 'easeInOutExpo'卡塔尔;

elem.style.left=x "px";
elem.style.top=y "px";
 function down() {var page_h=$; //687var page_top=parseInt); //0var move=wrap_top page_h;$.animate({top:move}, 800, 'easeInOutExpo');};
setInterval(function(){
    var x,y;
    if(elem.style.left){
         x = parseInt(elem.style.left);
    }else{
         x = 0;
    }
    if(elem.style.top){
         y = parseInt(elem.style.top);
    }else{
         y = 0;
    }
    if(x==final_x&&y==final_y){
        return true;
    }
},25);

用animate做点击翻页动漫时发现第叁次点击事件动漫没影响,而首先次点击有动漫效果,代码如下:

  • 前言
    那一种类小说的大旨是复习动漫函数,本文是最领头的这种,未来的博文逐步抓牢,最终以二个轮播图案例作为完成。
    示范地址:
    https://cdn.rawgit.com/hackerwen/hellojavascript/9cc5a1b0/js学习/js特效/左右焦点图/index.html
    卡通并非确实在动,而是每间距二个超级小的年月将贰个element移动二个非常的小的间隔,惹人爆发动画的效率,若是读者看过时辰候快速翻页就能够发生动漫效果的小人书那应该轻便了然。

复制代码 代码如下:$.animate({top:“-300px”}, 800, 'easeInOutExpo'卡塔尔国;

var distx=(final_x-x)/10;
distx=distx>0?Math.ceil(distx):Math.floor(distx);
x=x distx;
var disty=(final_y-y)/10;
disty=disty>0?Math.ceil(disty):Math.floor(disty);
y=y disty;

var page_h=$;获取page的莫斯中国科学技术大学学并赋值给page_h,得到的值是数值;var page_top=parseInt卡塔尔;获取当前page最上端到其父成分顶端的间距并赋值给page_top,;var move=wrap_top page_h;总括移动间距;

  1. 有备无患干活
    第意气风发,要运动的要素必需是纯属定位的,前面也说了,大家是每每地在二个超小的日子不断的翻新成分的左右地点(绝对于父盒子卡塔尔国,而符合大家要求的正是纯属定位了,通过校订left,right,top,bottom等属性的值来校正成分的职位。参数里有成分的最后地点,大家也急需获得成分的伊始位置。
    介怀:此处要转为整型,因为ele.style.left获取的是八个字符串,带单位"px".
    function animate(elem,final_x,fianl_y){
    var x,y;
    if(elem.style.left){
    x = parseInt(elem.style.left);
    }else{
    x = 0;
    }
    if(elem.style.top){
    y = parseInt(elem.style.top);
    }else{
    y = 0;
    }
    }

最后代码:

if(x==final_x&&y==final_y){//如果起始位置与目标位置一致
    return true;
}
var distx=(final_x-x)/10;
var disty=(final_y-y)/10;

“不断”。对的正是大家的setInterval(a,b卡塔尔国电火花计时器。那么些函数有四个参数,第一个参数a是要实施的代码块,第一个参数b是施行的间距时间,这里大家让它每25ms实践二次啊。

function animate(elem,final_x,final_y){
    clearInterval(elem.timer);//要用定时器,先清定时器
    elem.timer = setInterval(function(){
        var x = parseInt(elem.style.left)||0;
        var y = parseInt(elem.style.top)||0;
        if(x==final_x&&y==final_y){
            clearInterval(elem.timer);//用完定时器,清除定时器
            return true;
        }
        var distx=(final_x-x)/10;
        distx=distx>0?Math.ceil(distx):Math.floor(distx);
        x=x distx;
        var disty=(final_y-y)/10;
        disty=disty>0?Math.ceil(disty):Math.floor(disty);
        y=y disty;
        elem.style.left=x "px";
        elem.style.top=y "px";
    },25);
}

自身持有文章均为学习进程中的总结,分化水平地仿效了互联英特网任何的篇章或书籍,假设不正恳请提出,协同提高

function animate(elem,final_x,final_y){
    setInterval(function(){
        var x = parseInt(elem.style.left)||0;
        var y = parseInt(elem.style.top)||0;
        if(x==final_x&&y==final_y){
            return true;
        }
        var dist=10;
        if(x<fianl_x){//如果横向在目标位置左侧,则 10向目标位置前进
            x =10;
        }
        if(x>final_x){//如果横向在目标位置右侧,则-10向目标位置后退
            x-=10;
        }
        if(y<fianl_y){//同上
            y =10;
        }
        if(y>fianl_y){
            y-=10;
        }
        elem.style.left=x "px";
        elem.style.top=y "px";
    },25);
}

假定你先想通过调用animate函数将elem移动到对象地点1,在其还没达到的时候,又改成主意让它移动到对象地点2,再调用animate函数,传入了新的final_x,final_y,那时候就能够招致多少个反应计时器同期运行,爆发头昏眼花。

标题2. 放大计时器未有当即扼杀。

要养成好习贯:要用沙漏,先清机械漏刻。用完停车计时器,消逝机械漏刻。

如此那般,我们就开始达成了动漫片函数,每间隔25ms将成分移动10px(x轴与y轴卡塔尔(قطر‎,要是当前职分等于了指标地方,则脱离setInterval函数,animate实施完成。当时期码清单如下:

接踵而至 蜂拥而至的移动二个分寸的偏离,形成动漫的效应。

协助解决难点2。

难题1. 运动距离每一遍都是恒久的(10px卡塔尔(英语:State of Qatar),是匀速移动。大家想逼真一点,当间距目之处越近时进程变得越慢,发生默化潜移的职能;

机械漏刻A想让它到对象地方1,沙漏B想让它到对象地方2,获取的因素当前地点却是同叁个,就可导致使elem摇荡不定,所以要事后一遍的调用为准,废除前一遍的定时器。对了,达到目标地方后也要清除,总不能够把人家白白搁在这里。

好啊,今后我们获得了成分的苗头地方,那么哪些时候这么些函数才算完结了职分吗?没有错,正是开局地点与终止地方相等时。于是我们步入函数结束的尺度。

那儿,我们的运动的偏离不再是均等的10px,而是基于指标地方与近来地点的差(间距差)来拓展动态计算,当前岗位间距目之处越近大家移动的离开越小,每一回活动间距差的十二分之后生可畏,那样我们就不再是匀速运动了,间距差在时时刻刻减小,我们移动间距dist也在相连回降。
那多少个if也让人望着生厌,这时候我们的distx,disty已经包蕴正负号,可以一向加在x,y上了。
/10要有取整管理,正负数的提升取整不一致。代码如下:

问题1结束。

而是大概这么些因素并从未安装left以至top的值,于是我们供给实行检测,若无那四个值则将它们设置为0(实际上贰个纯属定位的成分若无设置值的话默感觉0,0卡塔尔(قطر‎;

先是解决难点1。

接下去大家的主题材料就是该怎么移动那些因素了。

"三个一线的离开"。即大家种种25ms让其运动的偏离,这里大家取10px;

setInterval(function(){
    var x,y;
    if(elem.style.left){
         x = parseInt(elem.style.left);
    }else{
         x = 0;
    }
    if(elem.style.top){
         y = parseInt(elem.style.top);
    }else{
         y = 0;
    }
    if(x==final_x&&y==final_y){
        return true;
    }
    var dist = 10;//我们移动的距离
    if(x<fianl_x){//如果横向在目标位置左侧,则 10向目标位置前进
        x=x 10;
    }
    if(x>final_x){//如果横向在目标位置右侧,则-10向目标位置后退
        x=x-10;
    }
    if(y<fianl_y){//同上
        y=y 10;
    }
    if(y>fianl_y){
        y=y-10;
    }
},25);
  • 函数最后代码(发轫)

      //elem:要移动的元素 fianl_x final_y 目的地坐标(相对于父盒子)
      function animate(elem,final_x,final_y){
          clearInterval(elem.timer);
          elem.timer = setInterval(function(){
              var x = parseInt(elem.style.left)||0;
              var y = parseInt(elem.style.top)||0;
              if(x==final_x&&y==final_y){
                  clearInterval(elem.timer);
                  return true;
              }
              var distx=(final_x-x)/10;
              distx=distx>0?Math.ceil(distx):Math.floor(distx);
              x=x distx;
              var disty=(final_y-y)/10;
              disty=disty>0?Math.ceil(disty):Math.floor(disty);
              y=y disty;
              elem.style.left=x "px";
              elem.style.top=y "px";
          },25);
      }
    
function animate(elem,final_x,fianl_y){
    setInterval(function(){
        var x,y;
        if(elem.style.left){
             x = parseInt(elem.style.left);
        }else{
             x = 0;
        }
        if(elem.style.top){
             y = parseInt(elem.style.top);
        }else{
             y = 0;
        }
        if(x==final_x&&y==final_y){
            return true;
        }
        var dist = 10;//我们移动的距离
        if(x<fianl_x){//如果横向在目标位置左侧,则 10向目标位置前进
            x=x 10;
        }
        if(x>final_x){//如果横向在目标位置右侧,则-10向目标位置后退
            x=x-10;
        }
        if(y<fianl_y){//同上
            y=y 10;
        }
        if(y>fianl_y){
            y=y-10;
        }
    },25);
    elem.style.left=x "px";
    elem.style.top=y "px";
}

咱俩能够先简化一下代码:

只是那串代码既不硬朗也不简洁,还足以优化。

本文由时时app平台注册网站发布于彩世界网址,转载请注明出处:jQuery中animate动画第二次点击事件没反应_jquery_脚

关键词: