0

我有一个图像网格，我希望放大一个 div id=box，从单击的图像到具有指定动画的整个网格空间，并以相同的方式关闭。第一轮完美地进行，但随后的几轮以意想不到的有趣方式执行。javascript 只是将 div 定位在单击的图像上。动画，出现和消失是使用 jquery 完成的。我对 jquery 不是很好，但无法抗拒动画选项。请针对这种不寻常的行为提出合适的替代方案或解决方案。谢谢。

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');
}); }); };
4

1 回答 1

0

您正在将 DOM 就绪函数分配给一个变量，并期望变量在不同的范围内工作等。尝试更像这样的东西：

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() 函数？

于 2012-12-15T15:35:56.013 回答