Div animation, no CSS3 for future position

Question

Div animation, no CSS3 for future position

Navigation

#1 by (2 votes)

4

I have a supposed product gallery, with divs aligned using {display: block; float: left;}

I've caused some divs to disappear depending on the menu selected using fadeOut() and reappear with fadeIn() . I've created this code to make this happen:

var tipo="all";
$('a.type').click(function(){
    $('a.type').removeClass('Bolding');
    $(this).addClass('Bolding');

    tipo=$(this).attr('id');
    $(".imagem").each(function(){
        if($(this).hasClass(tipo) || tipo=="all"){
            $(this).fadeIn();
        }else{
            $(this).fadeOut();
        }
    })

})

JSFiddle

When the divs are added they get the value {display:none} disappearing from the page. the problem is that other divs simply jump to the future position. And I wanted them to do an animation to the next position fitting. Take the example this plugin , only it gets paid.

I do not want to use CSS3 for compatibility.

jquery css3

asked by anonymous 24.05.2014 / 18:03

1 answer

PHP does not update .txt file data Databases for different clients

score 2 · Accepted Answer

Create an array of positions. Each item in the array has position values (top and left). When rearranging, animate the elements to the target position.

If you can put an id in each element it will make it much easier, for two reasons: the logic becomes simpler and the code is faster, since recovering elements by the id takes less.

With the ids, create an array with the order of the elements. When you hide an element, remove it from this list. In the end, take the list with the leftover elements and move them!

You will also notice that in your example the divs have absolute position. You will need this property to move the elements freely.

link

var tipo="all";
var posicoes = [[0,0],[0,80],[80,0],[80,80]];

    $('a.type').click(function(){

        var elementos = ['a','b','c','d'];
        var alterados = [];

        $('a.type').removeClass('Bolding');
        $(this).addClass('Bolding');

        tipo=$(this).attr('id');
        $(".imagem").each(function(){
            if($(this).hasClass(tipo) || tipo=="all"){
                $(this).fadeIn();
            }else{
                $(this).fadeOut();

                var elId = $(this).attr('id');
                var meuIndice = elementos.indexOf(elId); 
                elementos.splice(meuIndice,1);

            }
        })

        for (i in elementos){

            var meuIndice = elementos.indexOf(elementos[i]);

            alvoY = posicoes[meuIndice][0];
            alvoX = posicoes[meuIndice][1];

            console.log('elemento '+elementos[i]+' deve ir para '+alvoX+' e '+alvoY);

             $('#'+elementos[i]).animate({
                 top: alvoY,
                 left: alvoX,
             }, 1000);

        }

    })