O demora !! foi mal galera .. to trabalhando muito mas muito mesmo...

A partir da idéia do post inicial podemos brincar com animações para garantir que o emento de número 2 realize iterações para melhor visualização do conteúdo na tela.

Passo 1 CSS

Vamos começar fazendo o css dos elementos, começando com o .boxgrid que irá conter a imagem, alinhada no canto superior esquerdo. não se esqueca do overflow:hidden que torna tudo isso possível. link

.boxgrid{

    width: 325px;  

    height: 260px;  

    margin:10px;  

    float:left;  

    background:#161613;  

    border: solid 2px #8399AF;  

    overflow: hidden;  

    position: relative;  

}  

.boxgrid img{  

    position: absolute;  

    top: 0;  

    left: 0;  

    border: 0;  

}  

Se você não for utilizar legendas semi transparentes favor pular para o passo 2

.boxcaption{  

    float: left;  

    position: absolute;  

    background: #000;  

    height: 100px;  

    width: 100%;  

    opacity: .8;  

    /* For IE 5-7 */  

    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);  

    /* For IE 8 */  

    -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";  

    }

  Dependendo de como você vai querer o início da boxcaption (o que vai segurar o texto) tem que se definir os valores de top e left dependendo da altura ou largura do elemento boxgrid original.

Em breve a segunda parte do artigo. com o código Jquery e o html.

.captionfull .boxcaption {  

    top: 260;  

    left: 0;  

}  

.caption .boxcaption {  

    top: 220;  

    left: 0;  

}  

Post Original em: http://buildinternet.com/2009/03/sliding-boxes-and-captions-with-jquery/

Vamos la vou passar em pt-BR um tutorial de como dar uma de design ou surpreender seus clientes.

Tudo se baseia em CSS, HTML e Jquery, e acreditem vai ficar com cara de flash !!

Tendo com base uma div para utilizar de moldura iremos colocar duas outras divs para deslizar através da moldura.. conforme o diagrama:

from http://buildinternet.com/2009/03/sliding-boxes-and-captions-with-jquery/

A idéia e criar a animação para deslizar os elementos gerando um efeito interessante.

Nos proximos posts iniciarei o tutorial, no final teremos algo parecido com isto

http://fiddle.jshell.net/bpArG/show/light/

Link: http://www.parkerfox.co.uk/labs/cornerz

Exemplo: http://www.felipelambert.com.br/teste/round01/teste.html

Dica de: Ricardo Tomassi - Google groups jQuerybr

Plugin Brazuca para Modal

http://www.tidbits.com.br/click-modal-plugin-de-jquery-para-fazer-modal-lightbox

Arquivo interessante com comandos em Jquery,

Bom para deixar ao lado da mesa

http://www.scribd.com/doc/12959555/Jquery-13-Cheatsheet

em Tecnolgia e Educação por Cid Andrade

Um dos usos de jQuery que mais chamam a atenção dos desenvolvedores para Web é a aplicação de efeitos visuais nos elementos do documento HTML. ...

Clique aqui para Ir ao Restante ..

Por Cid Andrade do Blog Tecnologia e Educação

Este artigo apresenta os métodos mais importantes para uso da framework JQuery. Tudo o que você precisa saber para começar a trabalhar com JQuery está aqui e na Introdução a JQuery. Se desejar veja como selecionar elementos com JQuery.

Função JQuery

A função JQuery é representada por um $ e serve para selecionar elementos do documento. Esta função é a fundamental para o uso de JQuery. Uma vez feita uma seleção, podemos manipular estes elementos de diversas maneiras. Ela sempre retorna um objeto JQuery, definido internamente no framework.

Vejamos as possibilidades de uso da função JQuery:

• jQuery(expressão, [contexto]):jQuery. A expressão é um seletor de elemento do documento, tal como os seletores de CSS. O uso de contexto nesta função será tratado em outro artigo. Exemplo:
  $("div > p").css("border", "1px solid gray");
• jQuery(html, [proprietário]):jQuery. Cria um elemento com o conteúdo do primeiro parâmetro e o insere em outro elemento. O uso do proprietário nesta função não será tratado neste artigo. Exemplo:
  $("<div><p>Boa noite!</p></div>").appendTo("body")
• jQuery(elementos):jQuery. Seleciona um elemento HTML da página. Exemplo:
  $(document.body).css("background", "blue");
• jQuery(callback):jQuery. Equivalente ao $(document).ready().

Métodos de acesso a objetos JQuery

Diversos métodos que podem ser aplicados aos objetos JQuery retornados pela função JQuery. São:

• each(calback):jQuery. Executa uma função (callback) no contexto de cada objeto encontrado. Exemplo:
  $("div").each(function(i)){ this.style.color="red"; }
• size():int. Retorna número de elementos no objeto. Exemplo:
  alert($("div").size())
• length:int. Retorna número de elementos no objeto, sendo idêntica a size(). Exemplo:
  alert($("div").length)
• selector:String. Retorna um seletor que represente o seletor passado para uma função jQuery. Útil para desenvolvedores de plugins e não será tratado neste artigo.
• context:elemento. Retorna nó DOM. Semelhante ao selector, também não será tratado neste artigo.
• eq(posição):jQuery. Retorna um elemento de um conjunto. O primeiro tem o índice 0. Exemplo:
  $("p").eq(1).css("color","red")
• get():Array<elemento>. Retorna diversos elementos DOM. Útil para operar sobre grande conjunto de elementos. Exemplo:
  $("div").get().reverse()
  retornaria um vetor com todos elementos DIV na ordem inversa
• get(índice):elemento. Retorna um elemento de um conjunto de elementos DOM. Forma alternativa à função JQuery.
• index(sujeito):int. Procura um elemento e retorna o índice dele. Exemplo:alert($("div").index(this))

Métodos de manipulação de dados

Estes métodos fazem manipulação de dados associados a elementos jQuery.

• data(nome):variável. Retorna o dado armazenado sobre determinado nome em um elemento. Exemplo:
  $("div").data("v1")
• data(nome,valor):jQuery. Retorna a um dado com determinado nome um valor. Exemplo:
  $("div").data("v1","jQuery")
• removeData(nome):jQuery. Remove dado armazenado com determinado nome. Exemplo:
  $("div").removeData("v1")

Além destas, há alguns métodos de manipulação de dados que operam sobre filas, que são formadas por um vetor de funções.

Por Cid Andrade do Blog Tecnologia e Educação

Quase toda programação com JQuery é baseada na seleção de elementos para posterior manipulação.

Muitas são as formas de seleção de elementos com JQuery. Todas retornam um vetor de elementos (Array<elemento>).

Vamos a uma lista delas.

Seleção básica

• #id. Elemento com determinado id. Apenas um elemento deve ter determinada id em um documento. Exemplo:
  $("#primDiv").css("background-color","black");
• elemento. Seleção pelo elemento HTML. Exemplo:
  $("div").css("border","9px double red");
• .classe. Elementos de determinada classe. Exemplo:
  $(".destaque").css("fontWeight","bolder");
• .classe.classe. Elementos que pertençam a ambas classes. Exemplo:
  $(".destaque.especial").css("color","red");
• *. Todos elementos. Exemplo:
  $("*").css("color","black");
• Combinação dos anteriores. Os seletores podem ser combinados de diversas maneiras, separados por vírgulas. Exemplo:
  $("div,span,p.olho").css("margin","3px 0 0 0");

Hierarquia

A seleção pode ser mais detalhada com indicação de hierarquia. Veja as opções

• Ascendente Descendente. Seleção de descendentes de determinado elemento. Exemplo:
  $("form label").css("color","gray");
• Pai > Filho. Seleção de elementos-filho de um determinado elemento. Exemplo:
  $("#conteudo > *") .css("border","2px solid green");
• Anterior + Seguinte. Seleção de elemento que segue-se a um determinado elemento. Exemplo:
  $("label + input").css("border","1px dotted blue");
• Anterior ~ Irmãos. Seleção de elementos-irmãos após determinado elemento. Exemplo:
  $("#inicio ~ div").css("color","aquamarine");

Filtros

Outra forma de refinar a seleção é utilizar filtros. Vejamos uma lista de filtros:

• :first. Primeiro elemento da seleção. Exemplo:
  $("tr:first").css("font-style","italic");
• :last. Inverso de :first
• :not(seletor). Filtra elementos que não se encaixam em determinado seletor. Exemplo:
  $("input:not(:checked) + span") .css("border","1px dotted darkSalmon");
• :even. Elementos com índice par, considerado que o índice inicia em zero. Exemplo:
  $("tr:even").css("background-color","lavender");
• :odd. Inverso de :even
• :eq(índice). Determinado elemento pelo seu índice. Exemplo:
  $("td:eq(2)").css("background-color","MintCream");
• :gt(índice). Todos elementos com índice superior a determinado valor. Exemplo:
  $("p:gt(1)").hide();
• :lt(índice). Inverso de :gt(índice)
• :header. Todos elementos header. Exemplo:
  $(":header").css("color","navy");
• :animated. Todos elementos que estão sendo animados no momento da seleção.

Filtros de conteúdo

Além de filtrar os elementos em si, podemos criar filtros pelo conteúdo.

• :contains(texto). Seleciona elementos que contenha determinado texto. Exemplo:
  $("p:contains('JQuery')").css("text-decoration","underline");
• :empty. Seleciona elementos sem filhos. Exemplo:
  $("td:empty").css("background-color","MediumOrchid");
• :has(seletor). Seleciona elementos que contenham ao menos um determinado elemento que combine com o seletor informado. Exemplo:
  $("div:has(p)").addClass("grade");
• :parent. Seleciona elementos que tenham elementos filhos. Exemplo:
  $("td:parent").hide();

Filtros de visibilidade

Podemos alterar a propriedade de visibilidade dos elementos. Os filtros de visibilidade servem para selecionar elementos pela sua condição de visibilidade.

• :hidden: Seleciona elementos ocultados. Exemplo:
  $("div:hidden").show(2000);
• :visible. Inverso de :hidden

Filtros de atributos

Outra forma de filtrar uma seleção de elementos é pela presença, ausência ou valores de atributos dos elementos. Vejamos os métodos:

• [atributo]. Elementos que contenham determinado atributo. Exemplo:
  $("div[id]“).css(”color”,”lime”);
• [atributo=valor]. Elementos com atributo que tenham determinado valor. Exemplo:
  $("p[class='ocultar']“).hide(3000);
• [atributo!=valor]. Elementos com atributo que não tenham determinado valor.
• [atributo^=valor]. Elementos com atributo que inicie com determinado valor. Exemplo:
  $("input[name^='req']“).val(”Requerido”);
• [atributo$=valor]. Elementos com atributo que termine com determinado valor.
• [atributo*=valor]. Elementos com atributo que contenha determinado valor.
• Estes filtros podem ser combinados como neste exemplo:
  $("input[type='text'][id]“).css(”color”,”Darkred”);

Filtros por afiliação

Outra forma de filtrar é pela avaliação de relação de afiliação entre os elementos. Vejamos:

• :nth-child(índice/par/ímpar/equação). Seleciona o n-ésimo elemento da seleção por afiliação ou os elementos pares, ímpares ou ainda de acordo com uma equação. Exemplo:
  $("ol li:nth-child(2)").css("background-color","Bisque");
• :first-child. Primeiro filho de uma seleção.
• :last-child. Inverso de :first-child
• :only-child. Seleciona todos elementos que são únicos filhos de seus elementos-pai.

Elementos de formulário

Também podem ser selecionados os elementos de formulários como

• :input
• :text
• :password
• :radio
• :checkbox
• :submit
• :image
• :reset
• :button
• :file

Veja este exemplo:

$("form :checkbox").css("border","2px solid LightSlateGray");

Estado de elementos de formulários

Os elementos de formulários podem ter sua seleção refinada pelo estado destes elementos. São exemplos

• :enabled
• :disabled
• :checked
• :selected

Um exemplo de uso seria

alert($("input:checked").length + " selecionados");

Simples mas útil

 $(ele).find(':input').each(function() {
        switch(this.type) {
            case 'password':
            case 'select-multiple':
            case 'select-one':
            case 'text':
            case 'textarea':
                $(this).val('');
                break;
            case 'checkbox':
            case 'radio':
                this.checked = false;
        }
    });

ele no exemploe pode ser um form ou uma div que agrega os componentes.

Fonte: http://www.electrictoolbox.com/jquery-clear-form/

Indicação: cinemacom

Plugin para simular um dropdownlist.

http://jquery.sanchezsalvador.com/

exemplo de utilização

http://jquery.sanchezsalvador.com/samples/example.htm

Fonte: http://jquery.sanchezsalvador.com/

Indicação: Fábio do Cinemacom pela indicação