JQuery

[Rodrigo de Abreu 0]

Fala galera não manjo de jquery mais queria aprender...

queria q vcs dessem uma olhada nesse site:

http://www.galeteriamormaco.com.br/

 

foi feito em flash, mais sei q tem como fazer esse feito no jquery, certo?

alguem sabe o nome do efeito que é pra fazer isso?

 

alguem conhece uma boa tutoria de jquery?

 

to mais perdido que cego em tiroteio mais preciso aprender hehehe

 

 

abraço a todos!

[Rafael Sirotheau 43]

Isto pode ser feito utilizando o efeito Slide do jQuery, com algumas configurações especificas. Fiz algo parecido a pouco tempo... vou postar o codigo:

 

JS:

var numeroPassos = 5;
$("button#next").click(function() {

	var passoAtual = Number($( "#passoAtual" ).text());

	$( "#passo"+passoAtual ).hide( 'slide', { direction: 'left' }, 500, exibir( passoAtual+1, 'right' ) );
	$( "#passoAtual" ).text(passoAtual+1);

	if ((passoAtual+1) == numeroPassos) {
		$( this ).button( "option", "disabled", true );
	}
	$( "button#prev" ).button( "option", "disabled", false );
});

$("button#prev").click(function() {

	var passoAtual = Number($( "#passoAtual" ).text());

	$( "#passo"+passoAtual ).hide( 'slide', { direction: 'right' }, 500, exibir( passoAtual-1, 'left' ) );
	$( "#passoAtual" ).text(passoAtual-1);

	if (passoAtual == 1) {
		$( this ).button( "option", "disabled", true );
	}
	$( "button#next" ).button( "option", "disabled", false );
});

function exibir(passo,dir) {
	setTimeout(function() {
		$( "#passo"+passo ).show('slide', { direction: dir },  500);
	}, 500 );
};

 

 

HTML (algo assim):

<button id="prev">Reduzir</button><button id="next">Aumentar</button>

<div id="passo0" class="passos" style="display:block">
	<p style="margin-top:15px">Passo 0</p>
	<p>Ratione voluptatem sequi nesciunt. Lorem amet, consectetur, adipisci velit, sed quia non nempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
</div>

<div id="passo1" class="passos">
	<p style="margin-top:15px">Passo 1</p>
	<p>Qunatur aut odit aut fugit, qui ratione voluptatem sequi nesciunt. Lorem amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
</div>

<div id="passo2" class="passos">
	<p style="margin-top:15px">Passo 2</p>
	<p>Quia voluptas sit aspernatur aut odit aut fugit, qui ratione voluptatem sequi nesciunt. Lorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
</div>

<div id="passo3" class="passos">
	<p style="margin-top:15px">Passo 3</p>
	<p>Aspernatur aut odit aut fugit, sed quia consequuntur. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
</div>

<div id="passo4" class="passos">
	<p style="margin-top:15px">Passo 4</p>
	<p>Quia consequuntur. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
</div>

<div id="passo5" class="passos">
	<p style="margin-top:15px">Passo 5</p>
	<p>Odit aut fugit, sed quia consequuntur. Neque porro quisquam est, qui dolorem ipsum quia dolor sit modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
</div>

 

CSS:

button#prev, #button#next {
float:left;
}
div.passos {
display:none;
clear:both;
margin-top:15px;
width:100%;
min-height:500px;
}

 

Utilizei a ultima versao do jQuery, e a ultima versao do jQueryUI, com o core do Effects

[Rodrigo de Abreu 0]

Acho se eu tivesse UMA aula de jquery so pra ver como funciona eu ia aprender rapidinho! nao sei nem por onde começo kkkkkk alguem tem uma video aula ensinando do 0 a mexer com jquery?

 

abraço!

[Rafael Sirotheau 43]

o melhor lugar pra se aprender, é no proprio site do jQuery... Documentacao e API

 

e o melhor jeito de aprender... é mexendo, brincando, testando.. =)

 

 

Va na pagina de API, verifique algumas funcoes mais utilizadas (.click(), .change(), .each(), .parent(), .css()) e as chamadas de ajax (jQuery.post, jQuery.get)....

 

 

Brincando, brincando, rapidinho voce se acostuma e aprende... Foi assim que aprendi.. =)

 

 

Essa funcionalidade mesmo, pesquisei, pesquisei... mas nenhum plugin tinha documentacao suficiente, ou funcionava como esperado, acho que perdi cerca de 1~2 horas entre pesquisa, testes e modificacoes, sem sucesso... ae pensei.. Po! isso é so slide.. É mais rapido eu desenvolver um.. e assim foi.. em 15~20 min isso estava pronto e funcionando =P