jQuery缩放删除边框

Question

Anyone know why jquery scale removes the right and bottom border of the div when scaling it down? 任何人都知道为什么jquery scale在缩小时会移除div的右边和下边框？ Is there a fix for this? 有没有解决这个问题？

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Game</title>
<link rel="stylesheet" type="text/css" href="inc/css/global.css" />
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>

<style>
.hit-wraooer { position: relative;}
#hit { height: 98px; width: 98px; margin: 300px auto; border: 1px solid #000; }
.box { height: 600px; width: 600px; position: absolute; top: 55px; left: 500px; z-index:-1;}
.inside-box { height: 598px; width: 598px; border: 1px solid #000; position:relative; z-index:-1;border: 5px solid #000;}

</style>
</head>
<body>
<script type="text/javascript">

$(document).ready(function(){

    var myvar;

    $("#clickme").click(function(){
        myvar = setInterval(function(){toggle()}, 2000);
    });

    function toggle(){  
        $(".box").show();
        $(".box").toggle( "scale", {scale: 'box'}, 5000 );
        clearInterval(myvar);
    }

    $("#hit").click(function(){
            var alertme = $(".box").offset();
            var alertme2 = $("#hit").offset();
            if (alertme.top > alertme2.top){
                alert("hit");
            }
            else if (alertme.top < alertme2.top){
                alert("missed");
            }
    });
});
</script>
  <div class="box">
    <div class="inside-box"></div>
  </div>

  <div class="hit-wrapper">
    <div id="hit"></div>
  </div>

<a id="clickme" href="javascript:void(0)">Click Me</a>
</body>
</html>

Answer 1

That's because your border is in the .inside-box , which gets cut out when you resize its wrapper. 那是因为你的边框位于.inside-box ，当你调整它的包装时它会被切掉。

Pass the border CSS from the .inside-box to .box and it will work as expected. 将border CSS从.inside-box传递到.box ，它将按预期工作。

Live demos: Faulty - Working . 现场演示：错误 - 工作。

jQuery缩放删除边框

问题描述

1 个解决方案

解决方案1
4 已采纳 2012-07-06 19:30:21

jQuery缩放删除边框

问题描述

1 个解决方案

解决方案1 4 已采纳 2012-07-06 19:30:21

解决方案1
4 已采纳 2012-07-06 19:30:21