2010-09-15 11 views
0

Je veux animer un div en changeant sa propriété en haut comme ceci:jQuery Animer position de

var loadingFrame = 1; loadingFrame = (loadingFrame + 1) % 12; 

// Loading animation 
jQuery('div.ModalLoading div').animate('top', (loadingFrame * -40) + 'px'); 

L'idée est que la div intérieure aura l'air glisse à l'intérieur du ModalLoading div, et doit continuer infini. Au moment où le div est stationnaire. Merci.

EDIT: Cela basé sur le chargement dans FancyBox ->http://fancybox.net/ si cela aide quelqu'un à déboguer mon code.

div.ModalLoading 
{ 
    height: 40px; width: 40px; margin: 0 auto 20px; overflow: hidden; z-index: 1104; position: relative; 
} 
div.ModalLoading div 
{ 
    position: absolute; top: 0; left: 0; width: 40px; height: 480px; background: url('loading.png'); 
} 
+0

Avez-vous mis en divs CSS pour être 'position: absolute;'? – Cipi

+0

Oui, je vais aussi ajouter le CSS. – Cameron

+0

Salut à tous, des mises à jour? – Cameron

Répondre

0

Hmm, ive vient d'essayer et le meilleur que je peux faire est ceci.

var loadingFrame = 1; loadingFrame = (loadingFrame + 1) % 12; 

function startLoader(loopint,_left,_right) 
{ 
    settings = {}; 
    if(_left && !_right) 
    { 
     settings.left = (((loadingFrame + 1) % 12) * -40) 
     var _callback = function(){startLoader(loopint,false,true)} 
    }else{ 
     settings.left = (((loadingFrame + 1) % 12) * +40) 
     var _callback = function(){startLoader(loopint,true,false)} 
    } 

    jQuery('.inner').animate(settings,loopint,_callback); 
} 

et de démarrer l'animation.

startLoader(5000); 

Exemple ici: http://jsfiddle.net/v8rvM/2/

+0

Merci beaucoup pour cela. Cependant, je veux seulement animer un sens et répéter encore et encore sans retard. – Cameron

+0

Que diriez-vous de celui-ci: http://jsfiddle.net/v8rvM/3/ – RobertPitt