javascript - jQuery scaling effects, scale in 1.1 and back to 1 when background position changes -

-

i'm little stuck, tried css route new me , learning still cannot seem work out. js below switches background position show new image in sprite every 1 second wondering if knew how can kind of give small scale effects when changes grows little normal size before change next background position?

hope can me pulling hair out here haha

js:

    // avatar animations var avatarinterval; function startavataranimation() {      var = 0;     var avatarspeed = 500;     var avatarcount= 11;     var avatarheight = 250;     var avatartotalheight = 2750;      avatarinterval = setinterval(function(){         i++;         if(i > 11){             = 0;         }         $(".avatars").css({'background-position' : '0 -' + (i*avatarheight) + 'px' });         $(".avatars").toggleclass('scalein', 'scaleout');     }, avatarspeed);      return false;  }  function stopavataranimation(){     clearinterval(avatarinterval);      $(".avatars").css({'background-position' : '0 0' });     return false; }

js below switches background position show new image in sprite every 1 second wondering if knew how can kind of give small scale effects when changes grows little normal size before change next background position?

try utilizing transition @ css , setting duration half of avatarspeed or half of total duration of background-position effect ; setting transitionend event @ .one() prevent recursive call transitionend handler , .removeclass() , .addclass() toggle scale effect defined @ css

css

.avatars {   transition: transform 500ms ease-in-out;   width: 100px;   height: 100px;   background-image: url(/path/to/background-image); } .avatars.scalein {   transform: scale(1.1, 1.1); } .avatars.scaleout {   transform: scale(1.0, 1.0); }

js

// avatar animations var avatarinterval; function startavataranimation() {      var = 0;     var avatarspeed = 500;     var avatarcount= 11;     var avatarheight = 250;     var avatartotalheight = 2750;      avatarinterval = setinterval(function(){         i++;         if(i > 11){             = 0;         }         $(".avatars").css({'background-position' : '0 -' + (i*avatarheight) + 'px' })         .removeclass("scaleout").addclass("scalein")         .one("transitionend", function() {           $(this).removeclass("scalein").addclass("scaleout");         });     }, avatarspeed);      return false;  } 

$(".avatars").on("click", function() {      $(this).removeclass("scaleout").addclass("scalein")      .one("transitionend", function() {      $(this).removeclass("scalein").addclass("scaleout");    })  })
.avatars {    transition: transform 500ms ease-in-out;    width: 100px;    height: 100px;    background-image: url(http://lorempixel.com/100/100/nature);  }  .avatars.scalein {    transform: scale(1.1, 1.1);  }  .avatars.scaleout {    transform: scale(1.0, 1.0);  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">  </script>  <div class="avatars"></div>


Comments

Post a Comment

Popular posts from this blog

mysql - FireDac error 314 - but DLLs are in program directory -

-
i getting when trying access mysql database : [firedac][phys][mysql]-314. cannot load vendor library [libmysql.dll or libmysqlld.dll] this did not happen (unchanged) code, however, have upgraded windows 10 , had reinstall delphi xe8, system configuration matter. in order try solve problem, copied both of files c:\windows\sysytem32. when did not seem work, copied them \win32\debug, generated .exe resides. i imagine doing rather stupid, can't see what. the proper solution place driver file (eg., libmysql.dll ) in application's folder, or place installation location in fddrivers.ini file: [mysql] vendor=<folder>\libmysql.dll (recent versions of documentation seem use vendorlib instead of vendor in ini file.) see rad studio documentation topics configuring drivers (firedac) , connect mysql server (firedac) more information.
Read more

git - How to list all releases of public repository with GitHub API V3 -

-
so per documentation https://developer.github.com/v3/repos/releases/#list-releases-for-a-repository get /repos/:owner/:repo/releases should list relases , https://api.github.com/repos/jquery/jquery/releases should list releases in jquery project , not , why ? because repository doesn't have releases. has tags github presenting in releases page. for more clear example, see: https://github.com/hashicorp/terraform/releases which has both releases , tags showing on page, api shows releases: https://api.github.com/repos/hashicorp/terraform/releases
Read more

c++ - Getting C2512 "no default constructor" for `ClassA` error on the first parentheses of constructor for `ClassB`? -

-
my situation follows. let there header file classdeclarations.h , have following classes declared: class classa; class classb; class classa { public: classa(int x); classa(double y); int returninteger(void) { return m_x; } double returndouble(void) { return m_y; } private: int m_x; double m_y; } class classb { public: classb(int x); int returninteger(void) { return m_x; } private: int m_x; classa m_instancea_1; } let there *.cpp file called classdefns.cpp , define methods of classes declared in classdeclarations.h : #include classdeclarations.h classa::classa(int x) : m_x(x) { } classa::classa(double y) : m_y(y) { } classb::classb(int x) : m_x(x) { // line build error occurs m_instancea_1 = classa(0); } note have commented line compiler says there error: error c2512: 'classa' : no appropriate default constructor avai...
Read more