html - jquery animate() called on 2 elements only works on one? -


just wondering if had insight why might happening. have map on website scrolls when move mouse borders of container in. highlights specific city when hover on it, accomplished creating map overlay same dimensions original map. therefore apply same left , top css 2 images move in unison. example here: http://www.bestattorney.com/locations/

my problem when hover on links below map, area you're hovering on supposed come center of screen. works add little bit of animation move isn't jarring. when change animate({}) 0 1000, result overlay image moves, so: http://www.bestattorney.com/locations/locations2.html

i wondering if there reason think of off top of heads why happens? great if both images moved in first example.

what suspect there's setinterval(100) runs animate function, mean there 10 animates() running time first animation finishes. i'm not quite sure if there's done provide insight! all!

(scrolling plugin mjfisheruk: https://github.com/mjfisheruk/jquery.pan) simplified code reference or can in source. please let me know if can answer questions, thanks. 

var interval; //creates setinterval object    $("#container").pan({    //initialize scrolling placing mouse cursor @ edge of map.   });    var pan = function(areax,areay){     var oninterval = function() {          //if mouse on edge of map          //check way mouse moving          //set varx , vary location  should @                  if (areax != "" & areay != "") {               varx = areax;               vary = areay;             }                   $("#container img").animate({                  left: varx + "px",                  top: vary + "px"           }, 0);     }     interval = setinterval(oninterval,100);  }    $("li").mouseenter(function() {        //find out coordinates of hovered area , enter values in areax , areay        clearinterval(interval)        $("#container").pan({            //initialize scrolling, time use hovered area decide scroll to.          },areax, areay);  });
<div id="container">    <map>      <area>      <area>      <area>    </map>    <img id="map-overlay">    <img id="background-map">      </div>        <ul>    <li>location1</li>    <li>location2</li>    <li>location3</li>  </ul>

it looks animations may stacking on top of each other. since calling animate function inside interval shorter length of animation, of animations queued up. since interval calls animate every time runs, there lot of 1 second animations queued don't animate because moving same place.

i think should able solve issue if following:

  • only call animate function when animating new location
  • before call animate call stop function (docs), clear queue , make new animation start immediately

i tested adding stop call on demo page , made animations act little weird, made supposed opposed stopping part way , not lining 2 maps. think reducing number of times call animate fix weirdness.


Comments

Post a Comment

Popular posts from this blog

powershell Start-Process exit code -1073741502 when used with Credential from a windows service environment -

i'm running strange behavior powershell start-process call. here call: $process = start-process ` "c:\somepath\mybinary.exe" ` -passthru ` -credential $defaultcredential ` -wait ` -workingdirectory "c:\somepath" ` -loaduserprofile if ($process.exitcode -ne 0) { #do } this call return exit code - 1073741502 . after quick search, exit code seems related generic error when program not load required dll (aka. status_dll_init_failed ). when run without -credential $credential program runs correctly. in order isolate problem, manually launched some.exe in prompt target credential , runs smoothly. so problem seems come way start-process cmdlet launch process. i found potential solutions problem tried apply no luck : link , link . would have idea of what's going on here ? edit 1: run proc mon monitoring program activities when launched directly or via powershell script. problem seems occur when loading kernelbase
Read more

twig - Using Twigbridge in a Laravel 5.1 Package -

i'm trying create laravel 5.1 package uses twigbridge instead of .php views. can normal .php views display fine, when try make use of .twig templates i'm met error. possible use twigbridge templates when creating views laravel package or pretty stuck blade , php ? edit 1: loading twig template without extending works. it's when start using {% extends 'file' %} error comes out. i error error loading /virtual/laravel/packages/username/mypackage/src/views/sample.twig: template "templates.master" not defined () in "/virtual/laravel/packages/username/mypackage/src/views/sample.twig" @ line 1. my folders username |_ mypackage |_ src |_ controllers - samplecontroller.php |_ views |_ templates - master.twig - sample.twig twig template sample.twig {% extends 'templates.master' %} {% block content %} {{ parent()
Read more

c# - LINQ join Entities from HashSet's, Join vs Dictionary vs HashSet performance -

i have hashset's each stores t, have written test application compares different relation algorithms can think of, i'm not pleased results getting. does there exist more efficient ways of achieving object relations, once testing? using system; using system.collections.generic; using system.linq; using system.text; using system.threading.tasks; using system.diagnostics; namespace linqtests { class program { static void main(string[] args) { hashset<user> usertable = new hashset<user>(); hashset<userproperty> userpropertytable = new hashset<userproperty>(); #region lets create dummy data. console.writeline("please wait while creating dummy data, can take while..."); console.writeline(""); int rows = 1000000; for(int x = 0; x < rows; x++) { random rnd = new random(); // ad
Read more