Question

在网站上工作

http://lsmcreative.co.nz/

使用导航过滤拇指时，我遇到了一个有趣的错误。在制作动画时，图像会向左移动。

容器的位置相对像文档我不知道发生了什么

我的代码就像这样

几乎当你点击菜单上的一个按钮时，拇指都是一个像200px一样向左推动，然后动画回原位？

    // 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();

        });

      });

    });

Answer 1

我通过添加

修复了它

左：2.9702970297％重要;！到李的css

然后

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

动画制作时，流沙边距会发生变化

1 个答案: