прототип PeriodicalExecuter переместить эффект Div - PullRequest
Новая
       3

прототип PeriodicalExecuter переместить эффект Div

0 голосов
/ 10 января 2011

Попытка переместить div вниз во время выполнения запроса, а затем переместить div обратно в исходное положение по завершении. Но это только встать с каждой просьбой. Вот код 

new PeriodicalExecuter(function() {
    new Effect.Move('content', {
        x:0,
        y:15,
        duration:1
    });;
    new Ajax.Updater('content','/getcontent', {
        asynchronous:true,
        evalScripts:true,
        onComplete:function(request, json) {
            new Effect.Move('content', {x:0,y:-15,duration:1});
        },
        insertion:Insertion.Top,
        requestHeaders:['X-Update', 'content']
    })
}, 5)

1 Ответ

0 голосов
/ 19 января 2011

Вы ожидаете, что перемещение onComplete выполнится после завершения первого перемещения. Это вряд ли произойдет, потому что Move и Ajax.Updater являются асинхронными. Решение состоит в том, чтобы перейти к абсолютным движениям и отменить исходное движение, прежде чем второе вступит в конфликт с ним. 

$('content').store('originalOffset', $('content').cumulativeOffset());

new PeriodicalExecuter(function() {
    $('content').store(
     'move', 
      new Effect.Move('content', {
        x:$('content').retrieve('originalOffset').left,
        y:$('content').retrieve('originalOffset').top + 15,
        duration:1,
        mode: 'absolute'
      })
    );
    new Ajax.Updater('content','/getcontent', {
        asynchronous:true,
        evalScripts:true,
        onCreate: function() {
         $('content').retrieve('move').cancel();
        },
        onComplete:function(request, json) {
            new Effect.Move(
             'content', {
              x:$('content').retrieve('originalOffset').left,
              y:$('content').retrieve('originalOffset').top,
              duration:1,
              mode: 'absolute'
             }
            );
        },
        insertion:Insertion.Top,
        requestHeaders:['X-Update', 'content']
    })
}, 5);
...