javascript - 点击动画div

Question

我正在尝试为由窗口高度和宽度设置的 div 的边距设置动画。

请看 fiddle 。

http://jsfiddle.net/cf4zM/

第一次点击时底部和右侧边距动画效果很好，但左侧和顶部没有动画效果。第一次点击所有边距动画后。

任何帮助都会很棒。

  $( 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 的边距，您会发现错误。

您还可以在分配顶部、底部、左侧、右侧位置 0 的 css 中设置边距自动，以便使 div 绝对居中并从脚本中删除边距设置。

CSS

#resizer{

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

j查询

$( 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(){
    });
}