Animation of div, without CSS3 for future position

Asked

Viewed 184 times

4

I have a so-called product gallery, with Ivs lined up using {display: block; float: left;}

I made some Divs disappear depending on the menu selected using fadeOut() and reappear with fadeIn(). I created this code to make it 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 Ivds disappear they gain value {display:none} disappearing from the page. the problem is that other Ivs simply jump to the future position. And I wanted them to do an animation until the next position fits. Take as an example this plugin, only he gets paid.

I don’t want to use CSS3 for compatibility.

jquery css3 animation

  • It would be good to put a chunk of code in jsFiddle to facilitate the solution search by other people. I think it is even better because it facilitates the integration of the answer with your code.

  • http://jsfiddle.net/williammustaffa/Sn46E/ Here it is :D

  • Show, I’ll take a look.

  • I found an external plugin, have problem? If not I will adapt it to your code and put a response.

  • If it is a free plugin, it would make it much easier! No problem! Thank you! D

  • 1

    Okay, I’ll set up here and put.

  • Can you send me the name of the plugin? D

  • Oh yes, I was trying to do the source without using Html5 (since you don’t want css3). I found 2 plugins: the Quicksand (http://razorjack.net/quicksand/) and the Shuffle (http://vestride.github.io/Shuffle/) Also has the Isotope (http://isotope.metafizzy.co/) but it is paid for commercial use (cheap)

Show 3 more comments

1 answer

2


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 on each element it will make it much easier, for two reasons: the logic becomes simpler and the code gets faster, because recovering elements by id takes less.

With ids, create an array with the order of the elements. When hiding an element, remove it from this list. At the end, take the list with the remaining 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.

http://jsfiddle.net/vzCj7/

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);

        }

    })

Browser other questions tagged jquery css3 animation

You are not signed in. Login or sign up in order to post.