jquery和javascript代碼，後續執行給出意想不到的輸出，第一個是所需的輸出

Question

我有一個圖像網格，我希望放大一個div id = box，從點擊圖像到整個網格空間指定的動畫，並以同樣的方式關閉。第一輪比賽完美，但接下來的幾輪以意想不到的有趣方式執行。 JavaScript只是將div放在點擊的圖像上。動畫，出現和消失是使用jquery完成的。即時通訊不是很好的jQuery，但不能抵制動畫選項。請爲此不尋常的行爲建議一個合適的替代方案或解決方案。 thansks。

function box(id) 
{var tpos = document.getElementById(id).offsetTop; 
var lpos = document.getElementById(id).offsetLeft; 
document.getElementById('box').style.top= tpos; 
document.getElementById('box').style.left= lpos; 
setTimeout(function(){jqueryfunc();},800);} 

jqueryfunc = function(){ 
var box= $('#box'); 
$('#close').show(); 
box.show(); 
var ileft=box.css("left"); 
var itop=box.css("top"); 
box.animate({width:'793px',left:'06px'},1000); 
box.animate({height:'446px',top:'31px'},1000); 

jqueryclose = $(function(){ 
$('#close').click(function(){ 
$('#close').hide(); 
box.animate({width: '157px', left: ileft},1000); 
box.animate({height: '110px', top: itop},1000); 
box.fadeOut('slow'); 
}); }); }; 

Answer 1

你分配DOM ready函數的變量，並期待變量不同的範圍等合作嘗試更多的東西是這樣的：

function box(id) { 
    var elem = $('#'+id), 
     offset = elem.offset(), 
     box = $('#box'); 

    elem.css({top: offset.top, left: offset.left}); 
    setTimeout(jqueryfunc, 800); 
} 

function jqueryfunc() { 
    $('#close').show(); 
    $('#box').show().animate({width: 793, left: 6}, 1000) 
      .animate({height: 446, top: 31}, 1000); 

} 

$(function() { 
    $('#close').click(function() { 
     var box = $('#box'), 
      ileft = box.css("left"), 
      itop = box.css("top"); 
     $('#close').hide(); 
      box.animate({width: 157, left: ileft}, 1000) 
       .animate({height: 110, top: itop}, 1000) 
       .fadeOut('slow'); 
    }); 
});​ 

這一點兒也不看起來像你在任何地方調用box（）函數？