Ayuda con Jquery Hover

Hola gente, estoy ingresando al mundo de Jquery, pero la verdad me cuesta bastante aun. Quiero hacer algo así http://imaginity.com/portfolio/#all donde al pasar por sobre la imagen, aparezcan las barras negras. Por otro lado, también me gustaría lograr ese efecto que tiene al entrar al submenu donde se acomodan las ventanitas.

Alguien me podría orientar a como comenzar? Conseguí aplicar un script a un div que esta encima de la imagen oculto, pero como todas las imagenes son el mismo class, al hacer mouse over se activan todas las ventanas a la vez. Y otra cosa que no se hacer es como armar secuenciado el paso de una caracteristica de ccs (position) de un valor a otro. De 0 a 100px, en un paso. quiero que vaya mas lento. Como podria hacerlo?

Saludos! y desde ya muchas gracias!

supongamos que el div tiene asignada la clase "div1" podes hacer asi:

Código Javascript :

$('.div1').hover(function(){
      $(this).find('> img')/*y aca la funcion a la que queres asignarle el elemento*/

ah a proposito con css lo que vos queres es que se escale o que se mueva de un lugar a otro? y otra cosa no te conviene mas hacerlo desde jquery? es mas completo en animaciones
Saludos!

Estoy haciendolo de jquery. Lo que yo explico de las propiedades es lo que entendí se puede hacer desde jquery, elegir un selector class y modificar las propiedades css. Por ejemplo en esas barras negras, que tengan un valor position: -180px; y que pasen a valor 0 al pasar el mouse por encima. Mi problema es conseguir que eso se anime y que solo se aplique al class que le estoy haciendo el mouse over y no a todos.

Gracias por tu ayuda!

si eso se puede desde la misma animacion inclusive, y la funcion hover es una funcion que es la combinacion de mouse over y mouse out, hay varios tipos de formas de animar asi como de insertar codigos css:

Código Javascript :

$(document).ready(function(){
$('.imagen').css({/*aca editamos el css*/
   });
   $('.menu li').hover(function(){/*evento mouse over*/
      $(this).find('> ul').stop(true, true).$('contenedor1').animate({
         opacity:"100%",/*modifico la opacidad*/
         top:"-150px"/*modifico la posicion, puede ser left, right bottom, top*/
         width:"100%"/*modifico el ancho y con height el alto*/
         }, 'slow',/*duracion puede ser slow o fast o por ms de 200 a 600*/ 
         'easeInBounce'/*tipo de easing*/)
      }, function(){/*evento mouse out*/
         $(this).find('> ul ').stop(true, true).slideUp('slow', 'easeOutBounce');/*otro tipo de animacion entre ellas esta slideUp, slideDown, slideToggle, fadeIn, fadeOut, fadeToggle*/
/*donde fade hace el efecto de aparecer y desaparecer y slide hace el efecto deslizar*/
         });
});

ah me olvide de aclarar esto

Código Javascript :

$(this).find('> ul ')

lo que haces es buscar dentro del contenedor de la funcion en este caso 'menu li' los 'ul' que te muestro arriva

Muchas gracias de nuevo. Te hago una ultima consulta, como funcionar Jquery para aplicar la animacion a un div con una clase y todos los demas elementos tienen la misma clase??? Si o si hay que identificar el div en particular? Es sencillo cuando es uno o tres... pero cuando son 30 o mas... se complica animar uno a uno los ID de los divs.

Nuevamente muchas gracias!!!!!!!!!!!!!!!

walter adrian escribió:

la clave esta en usar el selector $(this), para hacer referencia a un div en particular y animar solo ese elemento.

Ejemplo:

Código Javascript :

$('.proyecto').on('hover', function(){

     $(this).find('.rayas_negras').slideDown();

});

Lo que hace el $(this) en este caso es seleccionar únicamente el elemento sobre el cual el usuario hace el hover.

saludos.

HtrMancera escribió:

No.
Aunque al final parece lo mismo debo corregir esto. this es la referencia al elemento que provoca el evento.

DriverOp escribió:

Eso quise decir

<script>
$(document).ready(function(){
$(".cuerpo_trabajos").click(function(e){
e.preventDefault()
$(".barra_sup").animate({
'top':-80px;
});
});

</script>

Gracias a todos. Perdon pero lo que publique antes fue por accidente. Es el codigo que estoy tratando de armar. pero no funciona. No se que estoy haciendo mal, porque tengo un doble problema. El div que activa el script no es el que es animado. Digamos, quiero que aplique una animacion sobre divs internos a div padre. Adjunto el codigo asi se entiende mejor.

Código HTML :

<article class="trabajos_contenedor">
<a href="#">
                    <img src="images/tr_bt_malanas01.jpg" alt="Malanas" width="300" height="192" border="0" class="trabajos_brand">
                    <div class="cuerpo_trabajos">
                       <div class="barra_sup">
                        <span class="txt_trabajo">Algo de texto</span>
                        </div>
                        <div class="barra_inf">
                        </div>
                    </div>
                </a>
</article>

No se si se entiende lo que quiero hacer. Por otro lado los el div cuerpo_trabajos no enmascara a los divs que contiene.

Gracias por su ayuda!