Jquery UI-仅在function.show（“幻灯片”）结束CSS生效后

我有个问题。我制作了必须显示元素的函数。问题是，当函数启动时，内容显示在错误的位置，CSS只有在函数完成时才会生效

    <script src="http://code.jquery.com/jquery-2.0.2.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script>
$(document).ready(function(){
    //Скрыть PopUp при загрузке страницы    
    PopUpHide();
});
//Функция отображения PopUp
function PopUpShow(){
    $("#kristaps_info").show();
}
//Функция скрытия PopUp
function PopUpHide(){
    $("#kristaps_info").hide();
}

$(document).ready(function(){
    //Скрыть PopUp при загрузке страницы    
    PopUpHide1();
});
//Функция отображения PopUp
function PopUpShow1(){
    $("#alise_info").show("clip",1000);
}
//Функция скрытия PopUp
function PopUpHide1(){
    $("#alise_info").hide();
}

---

尝试创建一些工作文件，如@RoySonasish I puted page live@

    <div class = "prof_line1">
        <div class = "prof_image" id = "kristaps_pic">
            <img src = "http://pokkers.lv/slakters/hhimages/krissprof.jpg"></img>
            <a href="javascript:PopUpShow()"><p>Kristaps Slakters - Zvejsalnieks, Frizieris/stilists/kreatīvais direktors</p></a>
        </div>
        <div class = "prof_image" id = "alise_pic">
            <img src = "http://pokkers.lv/slakters/hhimages/alise.jpg"></img>
            <a href="javascript:PopUpShow1()"><p>Alise Zvejsalniece Slaktere, House of Hair menedžeris</p></a>
        </div>
    </div>
    <div id = "kristaps_info">

        text
        <a href="javascript:PopUpHide()">Hide popup</a>
    </div>
    <div id = "alise_info">
        text
        <a href="javascript:PopUpHide1()">Hide popup</a>
    </div>

#kristaps_info, #alise_info {
    font-size:15px;
    border:3px solid black;
    width:914px;
    margin-top:30px;
    margin-left:50%;
    transform:translate(-50%); 
    -webkit-transform:translate(-50%);

}