position(). 왼쪽에서 예상 값을 제공하지 않습니다.

Question

Wordpress 사이트의 직원 섹션에서 각 직원 사진을 클릭하면 올바른 위치에 바이오 슬라이드가 열리려고합니다.

행이 전체 너비 (4 열)이고 모바일 (1 열)이지만 2 열 레이아웃 (480px ~ 882px) 인 경우 잘 작동합니다. position(). 왼쪽은 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>

나는 희망이 도움이!

건배!