position（）。左に期待値が与えられていない

Question

Wordpressサイトの従業員セクションで、各従業員の写真をクリックすると、正しい位置にバイオスライドを開いてみようとしています。

行が全幅（4列）でモバイル（1列）では2列レイアウト（480px〜882px）、位置（）、左が0を返すので、負のマージンは適切に適用されず、バイオがオフスクリーンになります。

私の人生のために私はこれがなぜなのか理解できません...どんな助けも大歓迎です！

問題のサイト：http://contractor-marketing.website/

HTML（簡体字）：

<div class="row"> 
    <div class="column column_1"> 
    <!--content--> 
    <div class="bio-full"><!--content--></div> 
    </div> 
    <div class="column column_2"> 
    <!--content--> 
    <div class="bio-full"><!--content--></div> 
    </div> 
    <div class="column column_3"> 
    <!--content--> 
    <div class="bio-full"><!--content--></div> 
    </div> 
    <div class="column column_4"> 
    <!--content--> 
    <div class="bio-full"><!--content--></div> 
    </div> 
</div> 

JS：

jQuery('.column').each(function(s, el) { 
    jQuery(this).find('.bio-full').eq(0).css('margin-left',-(jQuery(el).position().left)); 
}); 

Answer 1

は、以下の私の例を確認してください。私は別のアプローチをとっていましたが、本質的にあなたが望むものを行い、要素の遷移をアニメーション化します。

注：このアニメーションは、アニメーションボタンを押すたびに実行されます。そのようなアニメーションが複数回起きないようにする必要があります（それが探している振る舞いであれば）。また、$('#animate')セレクタとclickイベントを、選択したイベントに変更します。私はこれが役に立てば幸い

$('#animate').click(function() { 
 
    $(".bio-full").animate({ 
 
    left: "+=300", 
 
    }, 1000, function() { 
 
    // Animation complete. 
 
    }); 
 
});

body{ 
 
    padding:0; 
 
    margin:0; 
 
} 
 
.bio-full{ 
 
    background-color: red; 
 
    display:hidden; 
 
    position:relative; 
 
    width:300px; 
 
    left:-300px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="animate">Animate</button> 
 
<div class="row"> 
 
    <div class="column column_1"> 
 
    <!--content--> 
 
    <div class="bio-full"><h1>Profile</h1></div> 
 
    </div> 
 
    <div class="column column_2"> 
 
    <!--content--> 
 
    <div class="bio-full"><h1>Profile</h1></div> 
 
    </div> 
 
    <div class="column column_3"> 
 
    <!--content--> 
 
    <div class="bio-full"><h1>Profile</h1></div> 
 
    </div> 
 
    <div class="column column_4"> 
 
    <!--content--> 
 
    <div class="bio-full"><h1>Profile</h1></div> 
 
    </div> 
 
</div>

！

乾杯！