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 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() 関数を呼び出しているようには見えませんか?

于 2012-12-15T15:35:56.013 に答える