Question

我正在尝试通过窗口高度和宽度设置div设置的边距。

请看小提琴。

第一次单击时，底部和右边距的动画效果很好，但左侧和顶部不会设置动画。首先单击所有边距动画。

任何帮助都会很棒。

  $( document ).ready(function() { 

$("#resizer").height(
    $(window).innerHeight()
    );
$("#resizer").width(
    $(window).innerWidth()
    );

});

var xminus = window.innerWidth/15;
var yminus = window.innerHeight/15;


function resizediv(){
var x = $("#resizer").width() - xminus;
var y = $("#resizer").height() - yminus;


var heightoffset = (window.innerHeight - $("#resizer").height())/2
var widthoffset = (window.innerWidth - $("#resizer").width())/2
$("#resizer").animate({
    width : x,
    height : y,
    marginTop : heightoffset,
    marginBottom : heightoffset,
    marginLeft : widthoffset,
    marginRight : widthoffset
}, 1000, function(){
});
}

Answer 1

Demo

这是因为您使用jquery设置的边距。通过浏览器调试器检查每次点击的div的边距，你会发现错误。

您还可以在css中设置上限，下限，左下，右位置0，以便具有div的绝对居中并从脚本中删除边距设置。

CSS

#resizer{

    background-color: white;
    position: fixed;
    top:0;
    bottom:0;
    right:0;
    left:0;
    margin:auto;
    padding: 0;
    border:1px solid #000;
}

jquery的

$( document ).ready(function() { 

    $("#resizer").height(
        $(window).innerHeight()
        );
    $("#resizer").width(
        $(window).innerWidth()
        );

});

    var xminus = window.innerWidth/15;
    var yminus = window.innerHeight/15;


function resizediv(){
    var x = $("#resizer").width() - xminus;
    var y = $("#resizer").height() - yminus;


    var heightoffset = (window.innerHeight - $("#resizer").height())/2
    var widthoffset = (window.innerWidth - $("#resizer").width())/2
    $("#resizer").animate({
        width : x,
        height : y
    }, 1000, function(){
    });
}

Answer 2

您将左边距设置为：

var widthoffset = (window.innerWidth - $("#resizer").width()) / 2

最初，缩放器宽度与窗口宽度相同，这意味着在第一次单击时，偏移量将始终为0，这将导致元素保持在其位置。

另一方面，宽度设置为：

$("#resizer").width() - xminus

这意味着它将从第一次点击开始减少。

单击动画div

2 个答案: