Menu - desce na Sequencia Jquery

erison · Agosto 30, 2012

Pessoal estava Querendo Fazer uma animação no meu que faz assim:

menu 1 - menu 2 - menu 3 - menu 4

quero que desça o menu 1, depois o 2 , depois o 3 e assim por diante.

tentei fazer assim:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script>
$(function(){
$('ul li').animate({marginTop:+100},'slow')
})
</script>
<style>
body{margin:0;padding:0;}
ul{position:absolute;top:-80px;}
li{
float:left;
list-style:none;
background:#333;
color:white;
display:block;
padding:10px;
margin:0 5px;
border-radius:5px;
}
li:hover{ background:#444;}
</style>
</head>

<body>
<ul>
   <li>Menu1</li>
   <li>Menu1</li>
   <li>Menu1</li>
   <li>Menu1</li>
   <li>Menu1</li>
   <li>Menu1</li>
   <li>Menu1</li>    
</ul>
</body>
</html>

mas desceu tudo de uma vez,

e se eu colocar o next() ele so vai um, como resolvo isso?

rafaeldorazio · Agosto 30, 2012

tenta fazer assim:

Mudar de

$('ul li')

para

$('ul').children("li").next().........

erison · Agosto 30, 2012

desceu tudo tb, so não o primeiro

fassa o teste e so copiar e colocar no no editor q você ver o efeito.

rafaeldorazio · Agosto 30, 2012

tenta isso

$('ul').children("li").each(function(index, item) {

$this).animate({marginTop:+100},'slow')

});

erison · Agosto 30, 2012

nada, faz o teste ai

eu fiz assim mas so veio o primeiro eo segundo

$('ul li').first().animate({marginTop:+100},
function(){$(this).next().animate({marginTop:+100})})

JCMais · Agosto 30, 2012

Você precisa de uma forma que ao terminar de animar um elemento, ele anime o próximo na sequência, o primeiro pensamento é usar o parâmetro callback e enfileirar várias funções repetitivas para cada elemento, porém isso ficaria bem feio. :pinch:

Uma forma melhor é criar uma função que recebe como parâmetro o index do elemento à animar, e no callback da animação incrementar o index e chamar novamente a função:

var animateMenuItems = function( items, index ) {

  var index = index | 0; //caso index não seja passado, o define como 0

  if ( index < items.length ) { //se existir elemtno com o index especificado
       items.eq( index ).animate({ //pega-se este elemento e aplica a animação
           marginTop : +100
       }, function() {
           animateMenuItems( items, ++index ); //ao completar a animação, chama a função novamente, porém com o index do próximo elemento
       });
   }
}

rafaeldorazio · Agosto 30, 2012

JCMais, o problema é que o navegador ele é tao rápido por rodar no cliente que se não colocarmos um delay, ele faz tudo simultaneamente.

	$('ul li').each(function(index, item) {		

	$(".li").delay(1000).eq(index).animate({marginTop:+100},'slow');

});

erison · Agosto 30, 2012

mas me explique como vou colocar no codigo que coloquei acima.

JCMais, o problema é que o navegador ele é tao rápido por rodar no cliente que se não colocarmos um delay, ele faz tudo simultaneamente.
	$('ul li').each(function(index, item) {		

	$(".li").delay(1000).eq(index).animate({marginTop:+100},'slow');

});

não deu certo não :s

rafaeldorazio · Agosto 30, 2012

Segue o código completo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script>
$(function(){

       $('ul li').each(function(index, item) {         

               $(".li").delay(1000).eq(index).animate({marginTop:+100},'slow');

       });

});
</script>
<style>
body{margin:0;padding:0;}
ul{position:absolute;top:-80px;}
li{
       float:left;
       list-style:none;
       background:#333;
       color:white;
       display:block;
       padding:10px;
       margin:0 5px;
       border-radius:5px;
       }
li:hover{ background:#444;}
</style>
</head>

<body>
<ul>
   <li>Menu1</li>
   <li>Menu1</li>
   <li>Menu1</li>
   <li>Menu1</li>
   <li>Menu1</li>
   <li>Menu1</li>
   <li>Menu1</li>    
</ul>
</body>
</html>

erison · Agosto 30, 2012

Segue o código completo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script>
$(function(){

       $('ul li').each(function(index, item) {         

               $(".li").delay(1000).eq(index).animate({marginTop:+100},'slow');

       });

});
</script>
<style>
body{margin:0;padding:0;}
ul{position:absolute;top:-80px;}
li{
       float:left;
       list-style:none;
       background:#333;
       color:white;
       display:block;
       padding:10px;
       margin:0 5px;
       border-radius:5px;
       }
li:hover{ background:#444;}
</style>
</head>

<body>
<ul>
   <li>Menu1</li>
   <li>Menu1</li>
   <li>Menu1</li>
   <li>Menu1</li>
   <li>Menu1</li>
   <li>Menu1</li>
   <li>Menu1</li>    
</ul>
</body>
</html>

deu certo ai?

pq aqui nem rodo

rafaeldorazio · Agosto 30, 2012

realmente aqui nao rolo não. Mas eu já arrumei.

Segue o codigo correto:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script>
   $(function () {

       $('ul li').each(function (index, item) {

           $("ul li").delay(500).eq(index).animate({ marginTop: +100 }, 'slow');

       });

   });
</script>
<style>
body{margin:0;padding:0;}
ul{position:absolute;top:-80px;}
li{
       float:left;
       list-style:none;
       background:#333;
       color:white;
       display:block;
       padding:10px;
       margin:0 5px;
       border-radius:5px;
       }
li:hover{ background:#444;}
</style>
</head>

<body>
<ul>
   <li>Menu1</li>
   <li>Menu1</li>
   <li>Menu1</li>
   <li>Menu1</li>
   <li>Menu1</li>
   <li>Menu1</li>
   <li>Menu1</li>    
</ul>
</body>
</html>

erison · Agosto 30, 2012

realmente aqui nao rolo não. Mas eu já arrumei.

Segue o codigo correto:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script>
   $(function () {

       $('ul li').each(function (index, item) {

           $("ul li").delay(500).eq(index).animate({ marginTop: +100 }, 'slow');

       });

   });
</script>
<style>
body{margin:0;padding:0;}
ul{position:absolute;top:-80px;}
li{
       float:left;
       list-style:none;
       background:#333;
       color:white;
       display:block;
       padding:10px;
       margin:0 5px;
       border-radius:5px;
       }
li:hover{ background:#444;}
</style>
</head>

<body>
<ul>
   <li>Menu1</li>
   <li>Menu1</li>
   <li>Menu1</li>
   <li>Menu1</li>
   <li>Menu1</li>
   <li>Menu1</li>
   <li>Menu1</li>    
</ul>
</body>
</html>

cara deu certo.

so queria que você me explica-se oq faz essa parte

delay(500).eq(index).....

e se poderia fazer, quando começar ir decendo um ja ir decento o outro.

para não descer um a um.

tipo

---

----

---

não deixa so diminuie o delay

mas me explica para que serve delay(10).eq(index

rafaeldorazio · Agosto 30, 2012

delay = ela dá um tempo

eq(number) -> Sendo o ul o pai, o eq(index) seria o numero do index do li.

erison · Agosto 30, 2012

cara você entende bem de jquery. vlw

rafaeldorazio · Agosto 30, 2012

Por favor, para melhor organização dos tópicos, inclua a resposta correta do post para melhor visualização.

JCMais · Agosto 30, 2012

JCMais, o problema é que o navegador ele é tao rápido por rodar no cliente que se não colocarmos um delay, ele faz tudo simultaneamente.
	$('ul li').each(function(index, item) {		

	$(".li").delay(1000).eq(index).animate({marginTop:+100},'slow');

});

Ele não vai rodar simultaneamente, a função é chamada novamente de dentro do callback, e o callback em si, só é chamado após a execução da animação.

Arquivado

Menu - desce na Sequencia Jquery

Recommended Posts

erison 63

Compartilhar este post

Link para o post

Compartilhar em outros sites

rafaeldorazio 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

erison 63

Compartilhar este post

Link para o post

Compartilhar em outros sites

rafaeldorazio 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

erison 63

Compartilhar este post

Link para o post

Compartilhar em outros sites

JCMais 75

Compartilhar este post

Link para o post

Compartilhar em outros sites

rafaeldorazio 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

erison 63

Compartilhar este post

Link para o post

Compartilhar em outros sites

rafaeldorazio 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

erison 63

Compartilhar este post

Link para o post

Compartilhar em outros sites

rafaeldorazio 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

erison 63

Compartilhar este post

Link para o post

Compartilhar em outros sites

rafaeldorazio 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

erison 63

Compartilhar este post

Link para o post

Compartilhar em outros sites

rafaeldorazio 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

JCMais 75

Compartilhar este post

Link para o post

Compartilhar em outros sites

JAVA - Ajuda em Paginação

Alteracao Tema Wordpress Profolio

Alteracao Tema Wordpress Profolio

Fóruns

Tempo Real

Informação importante