Question

任何人都知道为什么jquery scale在缩小时会删除div的右边框和下边框？有没有解决这个问题？

 <!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

那是因为你的边框位于.inside-box，当你调整其包装大小时它会被删除。

将border CSS从.inside-box传递到.box，它将按预期工作。

现场演示：Faulty - Working。

jQuery缩放删除边框

1 个答案: