position(). Left gibt nicht den erwarteten Wert

Question

Im Mitarbeiterbereich einer Wordpress-Site versuche ich, die Bio-Folie an der richtigen Position zu öffnen, wenn Sie auf jedes Mitarbeiterfoto klicken.

Es funktioniert gut, wenn die Zeile die volle Breite (4 Spalten) und in mobilen (1 Spalte) aber im 2-Spalten-Layout (480px bis 882px), Position(), links ist 0, so dass der negative Rand isn Wird nicht richtig angewendet und die Biografie verschwindet.

Ich kann nicht für das Leben von mir herauszufinden, warum das ist ... Jede Hilfe wird sehr geschätzt!

Der Standort in Frage: http://contractor-marketing.website/

Die HTML (vereinfacht):

<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> 

Die JS:

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

Answer 1

unter meinem Beispiel prüfen. Obwohl ich einen anderen Ansatz gewählt habe, macht es im Wesentlichen, was Sie wollen, und es animiert sogar den Elementübergang.

HINWEIS: Diese Animation wird jedes Mal, wenn Sie die Animate-Taste drücken. Sie müssen verhindern, dass eine solche Animation mehr als einmal auftritt (wenn dies das gesuchte Verhalten ist). Ändern Sie auch das $('#animate') Selektor- und click-Ereignis zum Ereignis Ihrer Wahl.

$('#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>

Ich hoffe, das hilft!

Prost!