Método de animação

vini_loock · Dezembro 21, 2011

Olá pessoal, como já postei aqui, estou fazendo um framework para aprender um pouco mais sobre js.

Estou desenvolvendo agora o método animate, que funcionará como o método da jQuery (jQuery,animate()).

Ele até está funcionando, mas é aplicado a apenas um elemento, e não a todos os já selecionados.

O código de exemplo:

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8" />
        <title></title>
        &lt;script type="text/javascript" src="nojim.js"></script>
        &lt;script type="text/javascript">
            $(document).ready(function(){
                
                $('div.site').animate({width: 500}, 1000);
                
            });
        </script>
        <style type="text/css">
            .site{background: blue; display: inline; float: left; width: 100px; height: 100px;}
            #site{background: red;}
        </style>
    </head>
    <body>
        <div id="site" class="site">fsdf</div>
        <div class="site">fsdf</div>
    </body>
</html>

O método animate:

Nojim.prototype.animate = function(prop, _speed, _cb){
    speed = is_int(_speed) ? _speed : 2000;
    this.each(function(){
        var props = [];
        
        for(i in prop){
            props.push({
                prop: i,
                now: parseInt($(this).css(i)),
                end: prop[i],
                each: ((parseInt($(this).css(i))-prop[i])/(speed/10))*-1,
                cond: (parseInt($(this).css(i)) > prop[i] ? 1 : 2)
            });
        }
        
        var ends = 0;
        var el = this;
        var m_each = 99999;
        var i_each;
        
        for(i = 0; i < props.length; i++){
            if(props[i].each < m_each){
                m_each = props[i].each;
                i_each = i;
            }
        }
        
        __interval = setInterval(function(){
            if(ends == props.length){
                clearInterval(__interval[num]);
            }else{
                for(i = 0; i < props.length; i++){
                    if((props[i].cond == 1 && props[i].end >= props[i].now) || (props[i].cond == 2 && props[i].now >= props[i].end)){
                        ends++;
                    }else{
                        props[i].now += props[i].each;
                        $(el).css(props[i].prop, props[i].now+'px');
                    }
                }
            }
        }, (props[i_each].each-props[i_each].end)/(speed/10)*-1);
        
    });
}

E os métodos necessários para fazer funcionar esse exemplo:

function is_array(str){
    return typeof str == 'object' && str.length != undefined
}

function Nojim(els){
    this.elements = [];
    if(is_string(els))
        this.elements = document.querySelectorAll(els);
    else
        this.elements = els;
    return this;
}

Nojim.prototype.each = function(fn){
    if(is_array(this.elements)){
        for(i = 0; i < this.elements.length; i++){
            fn.call(this.elements[i], i);
        }
    }else{
        fn.call(this.elements);
    }
    return this;
}

Nojim.prototype.css = function(css, val){
    if(is_string(css)){
        if(val !== undefined){
            this.each(function(){
                this.style[css] = val;
            });
        }else{
            var el = is_array(this.elements) ? this.elements[0] : this.elements;
            if(el.currentStyle)
                return el.currentStyle[css];
            else if(window.getComputedStyle)
                return document.defaultView.getComputedStyle(el, null).getPropertyValue(css);
        }
    }else{
        for(var i in css){
            this.each(function(){
                this.style[i] = css[i];
            });
        }
    }
    return this;
}

function $(e){
    return new Nojim(e == undefined ? window : e)
}

Esse exemplo deveria(no Chrome) fazer o primeiro elemento(vermelho) aumentar seu width de 100px para 500px, se isso não acontecer, me avise, pode ser que eu não tenha incluido alguma função aqui no post.

Eu não faço a minima ideia onde esteja o problema, pois ele executa a animação no primeiro numa boa, só "esquece" de fazer o mesmo no segundo elemento div.site

Editado Dezembro 21, 2011 por vini_loock

vini_loock · Dezembro 21, 2011

Só uma ex-possível solução...

Tentei assim:

$(document.getElementsByTagName('div')[0]).animate({width: 500}, 1000);
    $(document.getElementsByTagName('div')[1]).animate({width: 500}, 1000);

E foi normal, os dois tiveram o efeito ao mesmo tempo, então pensei que fosse problema no método each, mas não é, pois eu substitui o método animate por isso:

Nojim.prototype.animate = function(){
this.each(function(n){
alert(n);
});
}

E voltei ao exemplo anterior:

$('div.site').animate({width: 500}, 1000);

Ele exibiu 2 alerts, primeiro 0 e depois 1, como esperado.

Entrar

Método de animação

Pergunta

vini_loock

Link para o comentário

Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

vini_loock

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades