Jquery Переместить Div в центр экрана (Masonry JS)

Question

Я использую Jquery Transit и Masonry JS. В моем div есть кнопка, которая, при нажатии на которую, должна изменить положение контейнеров на фиксированное и переместить его в центр экрана (с помощью Jquery Transit). Однако при щелчке окно перемещается в правый нижний угол экрана,

Вы можете просмотреть jsfiddle, чтобы увидеть мою проблему.

JavaScript

  WebFont.load({
    google: { families: [ 'Signika:400,700:latin', 'Open+Sans::latin', 'Hammersmith+One::latin' ]},
    active: triggerMasonry,
    inactive: triggerMasonry
  });
var $container;

function triggerMasonry() {
  // don't proceed if $container has not been selected
  if ( !$container ) {
    return;
  }
  //Joocy 
  // init Masonry
$container.imagesLoaded( function() {
  $container.masonry({
    itemSelector: '.p-small',
    "columnWidth": '.grid-size',
    gutter:10
  });
  });
}

// trigger masonry on document ready
  $container = $('#omni-content');
  triggerMasonry();
    var $cards = $('.p-small');
    var cardInFocus = null;

    $cards.each(function(index, elem){
        var $elem = $(elem);
        var pos = $elem.position();
        $(elem).data('orig-x', pos.left);
        $(elem).data('orig-y', pos.top);
    });

    var reset = function(){
        if(cardInFocus){
            $(cardInFocus).transition({x:0,y:0});}      
    };

    $(".o-help").click(function(e) {
        cardInFocus = $(this).closest(".p-small");
        var $doc = $(document);
        var centerX = $doc.width() / 2;
        var centerY = $doc.height() / 2;
        var $card = $(this).closest(".p-small");
        var widthcard = $card.width();
        $(".explain").css('position','fixed');
        $(".explain").css('width', widthcard);
        $card.addClass('explain');
        var origX = $card.data('orig-x');
        var origY = $card.data('orig-y');
        $(".modal-bg").fadeIn("slow");
        $(this).closest(".p-small").transition({x:centerX - origX,y:centerY-origY, duration:750});
    });

    $cards.blur(function(e){
        reset();
    });

Answer 1

Проблема в том, что вы перемещаете верхний левый угол контейнера в центр, а не в центр контейнера. Вот почему вы можете думать, что это не по центру. Для перемещения центра контейнера необходимо компенсировать половину ширины и половину высоты контейнера.

$(".o-help").click(function(e) {
    cardInFocus = $(this).closest(".p-small");
    var $doc = $(document);
    var centerX = $doc.width() / 2;
    var centerY = $doc.height() / 2;
    var destX = centerX - cardInFocus.width()/2;
    var destY = centerY - cardInFocus.height()/2;
    var $card = $(this).closest(".p-small");
    var widthcard = $card.width();
    $(".explain").css('position','fixed');
    $(".explain").css('width', widthcard);
    $card.addClass('explain');
    var origX = $card.data('orig-x');
    var origY = $card.data('orig-y');
    $(".modal-bg").fadeIn("slow");
    $(this).closest(".p-small").transition({x:destX -  origX,y:destY-origY, duration:750});
});

Вы можете просмотреть эту скрипку, чтобы проверить результат.