Question

我有点困惑，为什么这不符合预期。

我有一个基于页面大小环绕的<div>列表。但是单击div .animate()单击div的宽度，然后在div靠近在一起并将它们堆叠起来并动画化它们。

这一切都有效，除了最后一个堆叠的div，尽管有足够的空间仍被击倒到下一行。

请在jsfiddle上看到我的代码： http://jsfiddle.net/ZHYRq/2/

$.each($('.employee-box'), function(i, el) {
$(el).addClass("top-" + (Math.round($(el).offset().top)));
return $(el).css('position', 'relative').attr('data-left', Math.round($(el).offset().left));
});

$('.employee-image').hover(function(e) {
    var $employee;
    $employee = $(e.target).parents('.employee-box');
    if (e.type === 'mouseenter') {
        return $($employee.find('a.bio')).addClass('highlight');
    } else {
        return $($employee.find('a.bio')).removeClass('highlight');
    }
});

$('.employee-image, a.bio').click(function(e) {
    var $employee, is_expanded, speed;
    speed = 150;
    $employee = $(e.target).parents('.employee-box');
    is_expanded = $employee.hasClass('bio-expanded');
    if ($('.bio-expanded').length > 0) {
        $.when(collapse_previous_bio(speed)).then(function() {
            if (!is_expanded) {
                return expand_bio_box($employee, speed);
            }
        });
    } else {
        expand_bio_box($employee, speed);
    }
    return false;
});


var collapse_previous_bio = function(speed) {
    var klass;
    klass = "." + $('.bio-expanded').attr('class').match(/top-\d{1,5}/)[0];
    $('.bio-expanded .bio-block').fadeOut(speed, function() {
      $('.bio-expanded').animate({
        width: "185px"
      }, speed);
      $(klass).animate({
        left: '0px'
      }, speed);
      $('.bio-expanded').removeClass('bio-expanded');
    });
  };

  var expand_bio_box = function($employee, speed) {
    var curr_left, klass;
    klass = "." + $employee.attr('class').match(/top-\d{1,5}/)[0];
    curr_left = parseInt($employee.data('left'));

// comment out the $.when block and un-comment out the collapse_others() to see the other elements collapse as they should
$.when(collapse_others(klass, curr_left)).then(function() {
  $employee.animate({
    width: "392px"
  }, speed, function() {
    $employee.find('.bio-block').fadeIn(speed);
    $employee.addClass('bio-expanded');
  });
});
// collapse_others(klass, curr_left)


};



var collapse_others = function(klass, curr_left) {
    var left_pos;
    left_pos = 0;
    $.each($(klass), function(i, el) {
      var el_left;
      el_left = parseInt($(el).data('left'));
      $(el).css({
        zIndex: 100 - i
      });
      if (el_left > curr_left) {
        $(el).animate({
          left: "-" + left_pos + "px"
        }, 100);
        left_pos += 100;
      }
    });
  };

我不确定这里有什么问题。有什么想法吗？

jQuery重新排列DOM元素

0 个答案: