2012-07-06 123 views
1

任何人都知道爲什麼jQuery的規模去除縮放下來的div的右邊界和底部邊界?有沒有解決這個問題?jQuery縮放刪除邊框

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

回答

4

那是因爲你的邊界是在.inside-box,當你調整它的包裝物被切出。

妙傳.inside-box.boxborder CSS和預期它會奏效。

現場演示:Faulty - Working