Question

I'm trying to animate a box to the center of the screen's width using jquery with .css that will respond to browser size adjustment but I can't seem to get it to respond right in the center without refreshing the browser. Here's the code:

<div class="box"></div>

.box {
    position: absolute;
    border: 1px solid red;
    width: 300px;
    height: 300px;
}

$(function(){
    $(".box").css({left: $(window).width() / 2 - $(".box").width() / 2})
    .animate({left: '-=0%', top: '100px'},700);
});

I tried using .css({left:'50%'}) that will respond to browser size but now the box is not centered.

Answer 1

您可以使用此css示例居中： http://www.thesitewizard.com/css/center-div-block.shtml

代码段：

   $('#txtUploadFile').on('change', function (e) {
        var files = e.target.files;
        if (files.length > 0) {
            if (window.FormData !== undefined) {
                var data = new FormData();
                for (var x = 0; x < files.length; x++) {
                    data.append("file" + x, files[x]);
                }

                $.ajax({
                    xhr: function() {
                        var xhr = new window.XMLHttpRequest();
                        xhr.upload.addEventListener("progress", function(evt) {
                            if (evt.lengthComputable) {
                                var percentComplete = evt.loaded / evt.total * 100;
                                console.log("percentComplete = " + percentComplete);
                            }
                            else
                            {
                                console.log("lengthComputable evaluated to false;")
                            }
                        }, false);

                        xhr.addEventListener("progress", function(evt) {
                            if (evt.lengthComputable) {
                                var percentComplete = evt.loaded / evt.total * 100;
                                console.log("percentComplete = " + percentComplete);
                            }
                            else
                            {
                                console.log("lengthComputable evaluated to false;")
                            }
                        }, false);

                        return xhr;
                    },
                    type: 'POST',
                    url: '@Url.Action("upload","FileUploadAsync")',
                    data: data,
                    success: function(data){
                        console.log("success!");
                    }
                });
            } else {
                alert("This browser doesn't support HTML5 file uploads!");
            }
        }
    });

当你正在使用盒子时。我相信你想要一个像模态窗口的东西。因此，您可以使用jquery UI： https://jqueryui.com/dialog/

Answer 2

如果你仍然需要使用jQuery的样式，你可以尝试再次使用左.css({left:'50%'})然后添加负边距50％的方框.css({marginLeft: ($('.box').width() / 2)*-1})

所以动画代码摘要

$(".box").css({left: $(window).width() / 2 - $(".box").width() / 2})
.animate({left: '50%', marginLeft:  ($(".box").width()/2)*-1, top: '100px'},700);

Answer 3

根据我在评论中提到的对您的问题的理解，这是一个可以使用的解决方案。

$(function(){
  $(".box").css({left:'50%',transform:'translateX(-50%)'}).animate({top:'100px'},700);
});

参考：https://network.camunda.org/whitepaper/5。

jquery animate with center responsive

3 个答案: