是什么导致 jQuery UI 滑动而不是淡出？

Question

我正在使用 jQueryUI 和 Polymer 弹出对话框，我正在隐藏一个 div，然后从 ajax 加载个人资料照片的数据，并使用图像元素填充 div 并使其淡入。据我所知，它在另一个部分以相同的方式执行此操作，该部分很好地淡入而不是滑动。我在这里删除了很多代码，因为我发现它对问题没有影响。

function supervisorAccountPopup(e) {

    var button = e.target;

    while (!button.hasAttribute('data-dialog') && button !== document.body) {
        button = button.parentElement;
    }


    if (!button.hasAttribute('data-dialog')) {

        return;

    }

    var dialogID = button.getAttribute('data-dialog');
    var dialog   = document.getElementById(dialogID);

    if (dialog) {

    $('#supervisorPopupProfilePic').hide();


        dialog.open();

        $.ajax({
            type: 'POST',
            url: 'getProfileImage.php',
            data:{'userID':<? echo $createdByID; ?>, 
                  'size'  :'big'},
            tryCount:0,
            retryLimit:5,
            cache:false,
            success: function(data) {   

                var profileData = JSON.parse(data);

                if(profileData[0].profilePhotoFullpath != ""){

                    $('#supervisorPopupProfilePic').html("<img class='profileImgPopup' id='supervisorPopupProfilePicIMG' src='uploads/profile/" + profileData[0].profilePhotoFullpath + "?" + new Date().getTime() + "'>");

                    var supervisorPopupProfilePic = document.getElementById('supervisorPopupProfilePicIMG');

                    supervisorPopupProfilePic.onload = function () {
                        $('#supervisorPopupProfilePic').show('fade');       
                    };

                }else{

                    $('#supervisorPopupProfilePic').html("<img id='supervisorPopupProfilePicIMG' class='profileImgPopup' src='uploads/profile/_default/defaultProfileImage_big_noBorder.png'>");

                    var supervisorPopupProfilePic = document.getElementById('supervisorPopupProfilePicIMG');

                    supervisorPopupProfilePic.onload = function () {
                        $('#supervisorPopupProfilePic').show('fade');       
                    };

                }


            },
            error : function(xhr, textStatus, errorThrown ) {

                this.tryCount++;

                if (this.tryCount <= this.retryLimit) {
                    //try again
                    $.ajax(this);
                    return;
                }    

                return;

            }
        });

     }

}

Answer 1

您在此处使用淡入淡出选项：$('#supervisorPopupProfilePic').show('fade');

如果您只需要单个操作，则可以使用 slideToggle() 或 slideDown() 将内容滑入和滑出。你不需要 show();

button.click(function() {
  $('#supervisorPopupProfilePic').slideToggle( "slow", function() {

  });
});

或

button.click(function() {
  $('#supervisorPopupProfilePic').slideDown( "slow", function() {

  });
});