Ted k’ É assim que tem que ser! Programando em ASP, ASP.NET, PHP, CSS, dentre outras…


27
Oct/09
1


z-index com jQuery Galeria funcional

Script:

$(document).ready(function(){
  var z = 0;
  var inAnimation = false;

  $("#fotos img").each(function(){
    z++;
    $(this).css("z-index", z);
  });

  function swapFirstLast(isFirst){
    if(inAnimation) return false;
    else inAnimation = true;

    var processZindex, direction, newZindex, inDeCrease;

    if(isFirst){
		processZindex = z; direction = "-"; newZindex = 1; inDeCrease = 1;
	}
    else {
		processZindex = 1; direction = "-"; newZindex = z; inDeCrease = -1;
	}

    $("#fotos img").each(function(){
      if($(this).css("z-index") == processZindex){
        $(this).animate({"top" : direction + $(this).height() + "px"}, "slow", function(){
          $(this).css("z-index", newZindex)
            .animate({"top" : "0"}, "slow", function(){
              inAnimation = false;
            });
        });
      } else {
        $(this).animate({"top" : "0"}, "slow", function(){
          $(this).css("z-index", parseInt($(this).css("z-index")) + inDeCrease);
        });
      }
    });
    return false;
  }

  $("#proximo a").click(function(){
    return swapFirstLast(true);
  });

  $("#anterior a").click(function(){
    return swapFirstLast(false);
  });
});

Script Completo CLIQUE AQUI


Página 1 de 11



Portfólio Ted k'

Atualize seu Navegador