83503

jQuery UI make the effect less abrupt and jerky

Question:

I have a little toggle sidebar that I am using jQuery UI. The problem is it is very jerky behavior. Anyway to may it look like a smooth scroll left/right?

I am trying to get the outer shell to slide smoothly like the inner container slides. Currently it is snapping once the inner div is finished easing.

$(".snapper").click(function() { $(".sidebar-wrapper").toggle("slide", { direction: "right" }, 1000); $("#sidebar").css("width" , "auto"); });

Online Example. <a href="http://frontendtrends.com/sidebar/" rel="nofollow">http://frontendtrends.com/sidebar/</a>

Answer1:

The problem is with auto. change it to some fix value and you are done.

$("#sidebar").css("width" , "200px");

Check this <a href="http://jsbin.com/otusol/4/" rel="nofollow">Demo</a>

CSS

.o{ display:block; float:right; width:30px; border-radius:10px; height:300px; overflow:hidden; background-color:black; } .out{ display:block; float:right; width:40%; border-radius:10px; height:300px; background-color:black; } .i{ display:none; width:200px; border-radius:10px; height:200px; overflow:hidden; background-color:grey; margin:10px 50px 10px 10px; } .i2{ display:block; width:100px; border-radius:10px; height:100px; background-color:orange; margin:10px 50px 10px 10px; }

JS

$(document).ready(function(){ $('.o').click(function(){ $(this).toggleClass('out',1000); if ($('.i').css('display')=='block'){ $('.i').fadeOut('slow'); } else{ $('.i').fadeIn(1000); } }); });

Recommend

  • How can I set MKMapView's region span dynamically so that it doesn't “snap” back to the in
  • Resizing a rectangle and snapping to a fixed ratio
  • Refresh the Office Ribbon UI while the window is inactive
  • How can I calculate a value and place it inside the last bar in a Chart.JS bar chart?
  • Simple easing on bootstrap scrollspy
  • Lock a window position to another window?
  • Trigger animation when div element appears in viewport
  • Creating a simple, full-width, infinite carousel with jQuery
  • Change scroll direction at Anchor point
  • addEventHandler() in a loop has unexpected results
  • Error: Cannot determine the module for class OverlayPortal in --prod
  • Play youtube video in offline mode?
  • TextPad “find in files” not matching on simple OR regex
  • JSONPath Syntax when dot in key
  • jQuery, Calling multiple animations in a row on click
  • Can someone please explain how this implementation of bucket sort works?
  • Compiling Haskell programs in Windows: is it possible without downloading something such as Cygwin?
  • Where to put clearQueue in jQuery code
  • Get or convert Week of year to ISO week
  • How to distribute Java-based software?
  • Wait for .each() .getJSON request to finish before executing a callback
  • Hibernate to update table schema
  • Do query loads all the data in memory
  • Possible to “watch” both HAML and SASS at the same time?
  • Jackson Parser: ignore deserializing for type mismatch
  • PHP buffered output depending on server setting?
  • Change multiple background-images with jQuery
  • FileReader+canvas image loading problem
  • Insert into database using onclick function
  • Deselecting radio buttons while keeping the View Model in synch
  • Why ng-show works with ng-repeat but ng-if doesn't? [duplicate]
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • Trying to switch camera back to front but getting exception
  • How to show dropdown in excel using jrxml (jasper api)?
  • jquery mobile loadPage not working
  • Data Validation Drop Down Box Arrow Disappearing
  • NSLayoutConstraint that would pin a view to the bottom edge of a superview
  • How get height of the a view with gone visibility and height defined as wrap_content in xml?
  • How do you join a server to an Active Directory (domain)?
  • python draw pie shapes with colour filled