Quicksand margins change when animating

Question

Working on a site

http://lsmcreative.co.nz/

I get a funny bug when using the nav to filter the thumbs. The images do a wierd movement to the left when animating

The container is position relative like the documentation I am not sure what is going on

My code is like this

and pretty much when you click on a button in the menu the thumbs are all of a sudde pushed like 200px to the left and then animate back into place?

    // Custom sorting plugin
    (function($) {
      $.fn.sorted = function(customOptions) {
        var options = {
          reversed: false,
          by: function(a) { return a.text(); }
        };
        $.extend(options, customOptions);
        $data = $(this);
        arr = $data.get();
        arr.sort(function(a, b) {
          var valA = options.by($(a));
          var valB = options.by($(b));
          if (options.reversed) {
            return (valA < valB) ? 1 : (valA > valB) ? -1 : 0;              
          } else {      
            return (valA < valB) ? -1 : (valA > valB) ? 1 : 0;  
          }
        });
        return $(arr);
      };
    })(jQuery);

    // DOMContentLoaded
    $(function() {

      // bind radiobuttons in the form
      var $btn = $('#navigation ul li a');

      // get the first collection
      var $projectThumbs = $('#portfolio');

      // clone applications to get a second collection
      var $data = $projectThumbs.clone();

      // attempt to call Quicksand on every form change
        $btn.click(function(e) {

            e.preventDefault();
            if($(this).data("type") == "all"){

               $btn.removeClass("selected");
               $(this).addClass("selected");
               var $filteredData = $data.find('li');

             } else {

               $btn.removeClass("selected");
               $(this).addClass("selected"); 

               var $filteredData = $data.find('li[data-type~=' + $(this).data("type") + ']');
        }   // end $btn.click function

        $projectThumbs.quicksand($filteredData, {
          adjustHeight: 'auto', // This is the line you are looking for.                        
          duration: 800,
          easing: 'easeInOutQuad'
        }, function(){
            // call js on the cloned divs
            $("a.grouped_elements").fancybox();

        });

      });

    });

Can you post the code that has to do with the animation? And isolate the example via [jsfiddle.net](http://jsfiddle.net) to demonstrate your issue so we can better assist. — Amy, Mar 20 '13 at 08:27
I visited your site, but not able to identify what you mean exactly, provide fiddle/code and then proceed with details, edit your question and be more specific, including (if you have this problem in any browser, (like, Internet Explorer) then specify each detail to get the correct solution. thank you. — MarmiK, Mar 20 '13 at 08:50

score 0 · Answer 1 · answered Mar 20 '13 at 09:06

0

I fixed it by adding

left:2.9702970297%!important; to the css of the li

and then

#portfolio li:nth-child(3n+1){
    margin-left:0;
}

answered Mar 20 '13 at 09:06

Chris G-Jones

596
4
13
26

Quicksand margins change when animating

1 Answers1