javascript - Choppy animation on scroll -


i'm attempting animate block based on how far scrolled down page am, using jquery change css attribute.

when using mouse wheel, there slight flicker of , ends being shown @ same time.

an example of can viewed @ following link.

http://fiddle.jshell.net/lpves/10/show/light/

this behaviour not smooth , feels 'choppy'.

i have no idea why happening. expected behaviour should this:

http://jsfiddle.net/lpves/10/embedded/result/

i understand irony of linking exact same example. difference can see between 2 1 embedded in iframe, not solution want use.

my js code:

var icons = {     header: "iconclosed",     activeheader: "iconopen" };  $('.main--content').accordion({     header: ".accordion header",     heightstyle: "content",     collapsible: true,     icons: icons });  function accordionicon() {      var icon = $('.ui-accordion-header-icon.iconopen');     var iconclosed = $('.ui-accordion-header-icon.iconclosed');      if (icon[0]) {         var article = $('.ui-accordion-header-icon.iconopen').closest('.article')          if (article.offset().top - window.scrolly > 200) {              if (icon.css('top') !== 0) {                 icon.css('top', 0)             }          } else if (article.offset().top - window.scrolly < 200) {             // article.outerheight() - (icon.offset().top - article.offset().top) > 0             if (article.offset().top - (window.scrolly + 200) < article.outerheight() && window.scrolly + $(window).height() - article.offset().top < article.outerheight()) {                  var position = (window.scrolly + 200) - article.offset().top                  // if(icon.css('transform') === none){                 icon.css('top', position)                 // }                  if (icon.hasclass('iconextend')) {                     icon.removeclass('iconextend')                 }              } else if (window.scrolly + $(window).height() - article.offset().top > article.outerheight()) {                  if (icon.css('top') !== article.outerheight() + 30) {                     icon.css('top', article.outerheight() + 30)                 }                  if (!icon.hasclass('iconextend')) {                     icon.addclass('iconextend')                 }              } else {                  if (icon.css('top') !== article.outerheight()) {                     icon.css('top', article.outerheight())                 }                  if (!icon.hasclass('iconextend')) {                     icon.addclass('iconextend')                 }              }         }     }      if (iconclosed[0]) {          if (iconclosed.css('top') !== 0) {             iconclosed.css('top', 0)         }          if (iconclosed.hasclass('iconextend')) {             iconclosed.removeclass('iconextend')         }      } }  function raf() {      window.requestanimframe = (function () {         return window.requestanimationframe || window.webkitrequestanimationframe || window.mozrequestanimationframe || window.orequestanimationframe || window.msrequestanimationframe || function (callback) {             window.settimeout(callback, 1000 / 60);         };     })();      requestanimframe(raf);      accordionicon(); }  raf();

any appreciated.


Comments

Post a Comment

Popular posts from this blog

apache - Remove .php and add trailing slash in url using htaccess not loading css -

i have add following code htaccess file removing .php extension , add trailing slash urls. worked fine reduced page loading speed , css code not loading @ all. pages ugly. please help rewriteengine on rewritebase / ## hide .php extension snippet # externally redirect /dir/foo.php /dir/foo rewritecond %{the_request} ^[a-z]{3,}\s([^.]+)\.php [nc] rewriterule ^ %1/ [r,l] # add trailing slash rewritecond %{request_filename} !-f rewritecond %{request_uri} !/$ rewriterule . %{request_uri}/ [l,r=301] # internally forward /dir/foo /dir/foo.php rewritecond %{request_filename} !-d rewritecond %{request_filename}.php -f rewriterule ^(.*?)/?$ $1.php [l] we can rewrite urls using .htaccess files. before writing in .htaccess files need verify kind of server using. can check server adding a <?php phpinfo(); ?> in php page. ensure mod_rewrite module enabled in apache server. can identified checking phpinfo included page. common methods used url rewriting follows ...
Read more

javascript - jQuery show full size image on click -

pretty self explanatory not workking . i want display full image when user click on image... yes know there tons of plugins but i want keep simple. any idea ? css : .full { display: none; width: 500px; height: 500px; margin-left: 100px; margin-top: -300px; position: fixed; background-color: #f00; z-index: 6; } .thumbnail { width: 50px; height: 50px; } html: <img class="thumbnail" src="http://4.bp.blogspot.com/-uhbdp2esxng/txneptvi92i/aaaaaaaaaky/upfqis7zto0/s1600/rihanna-wallpaper.jpg"> jquery: $(document).ready(function() { $('.thumbnail').on('click', function() { var img = $('<img />',{src:this.src,'class':'full'}); $('.full').html(img).show(); console.log('done!'); }); }); try looking how jquery works. $(document).ready(function() { $('.thumbnail').on('click', function(...
Read more