Jquery Transit と Masonry JS を使用しています。私のdivには、クリックするとコンテナの位置を固定に変更し、画面の中央に移動する必要があるボタンがあります(Jquery Transitを使用)。ただし、クリックすると、ボックスは画面の右下に移動します.
jsfiddleを表示して、私の問題を確認できます。
ジャバスクリプト:
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();
});