Problema con JQuery, JS o CSS

[venommist]

Buen Día Chicos:

bueno, estoy recién haciendo mi práctica y me pidieron una forma creativa para poder realizar un proyecto web de integración de convenios con diferentes agrupaciones de descuentos para fiestas y cumples.

vi un efecto en JQuery que me convenció a mi y a mis Jefes (patrones, negreros LTDA).
Lo he aplicado y el SCRIPT de aplicación queda mas menos así:

<script src="js/jquery-1.3.1.min.js">(esta es la version de JQUERY)</script>
<script src="js/js_destacados.js"></script>

<script>
$(document).ready(function() {

//Custom settings
var style_in = 'easeOutBounce';
var style_out = 'jswing';
var speed_in = 1000;
var speed_out = 300;

//Calculation for corners
var neg2 = Math.round($('.witem').width() / 2) * (-1)
var pos2 = neg * (-1);
var out2 = pos * 2;

$('.witem').each(function () {

url = $(this).find('a').attr('href');
img = $(this).find('img').attr('src');
alt = $(this).find('img').attr('img');

$('img', this).remove();
$(this).append('<div class="topLeft"></div><div class="topRight"></div><div class="bottomLeft"></div><div class="bottomRight"></div>');
$(this).children('div').css('background-image','url('+ img + ')');

$(this).find('div.topLeft').css({top:0, left:0, width:pos2 , height:pos2});
$(this).find('div.topRight').css({top:0, left:pos2, width:pos2 , height:pos2});
$(this).find('div.bottomLeft').css({bottom:0, left:0, width:pos2 , height:pos2});
$(this).find('div.bottomRight').css({bottom:0, left:pos2, width:pos2 , height:pos2});

}).hover(function () {

$(this).find('div.topLeft').stop(false, true).animate({top:neg2, left:neg2}, {duration:speed_out, easing:style_out});
$(this).find('div.topRight').stop(false, true).animate({top:neg2, left:out2}, {duration:speed_out, easing:style_out});
$(this).find('div.bottomLeft').stop(false, true).animate({bottom:neg2, left:neg2}, {duration:speed_out, easing:style_out});
$(this).find('div.bottomRight').stop(false, true).animate({bottom:neg2, left:out2}, {duration:speed_out, easing:style_out});

},

function () {

$(this).find('div.topLeft').stop(false, true).animate({top:0, left:0}, {duration:speed_in, easing:style_in});
$(this).find('div.topRight').stop(false, true).animate({top:0, left:pos2}, {duration:speed_in, easing:style_in});
$(this).find('div.bottomLeft').stop(false, true).animate({bottom:0, left:0}, {duration:speed_in, easing:style_in});
$(this).find('div.bottomRight').stop(false, true).animate({bottom:0, left:pos2}, {duration:speed_in, easing:style_in});

}).click (function () {
window.location = $(this).find('a').attr('href');
});
}

var neg = Math.round($('.qitem').width() / 2) * (-1)
var pos = neg * (-1);
var out = pos * 2;


$('.qitem').each(function () {

url = $(this).find('a').attr('href');
img = $(this).find('img').attr('src');
alt = $(this).find('img').attr('img');

$('img', this).remove();
$(this).append('<div class="topLeft"></div><div class="topRight"></div><div class="bottomLeft"></div><div class="bottomRight"></div>');
$(this).children('div').css('background-image','url('+ img + ')');

$(this).find('div.topLeft').css({top:0, left:0, width:pos , height:pos});
$(this).find('div.topRight').css({top:0, left:pos, width:pos , height:pos});
$(this).find('div.bottomLeft').css({bottom:0, left:0, width:pos , height:pos});
$(this).find('div.bottomRight').css({bottom:0, left:pos, width:pos , height:pos});

}).hover(function () {

$(this).find('div.topLeft').stop(false, true).animate({top:neg, left:neg}, {duration:speed_out, easing:style_out});
$(this).find('div.topRight').stop(false, true).animate({top:neg, left:out}, {duration:speed_out, easing:style_out});
$(this).find('div.bottomLeft').stop(false, true).animate({bottom:neg, left:neg}, {duration:speed_out, easing:style_out});
$(this).find('div.bottomRight').stop(false, true).animate({bottom:neg, left:out}, {duration:speed_out, easing:style_out});

},

function () {

$(this).find('div.topLeft').stop(false, true).animate({top:0, left:0}, {duration:speed_in, easing:style_in});
$(this).find('div.topRight').stop(false, true).animate({top:0, left:pos}, {duration:speed_in, easing:style_in});
$(this).find('div.bottomLeft').stop(false, true).animate({bottom:0, left:0}, {duration:speed_in, easing:style_in});
$(this).find('div.bottomRight').stop(false, true).animate({bottom:0, left:pos}, {duration:speed_in, easing:style_in});

}).click (function () {
window.location = $(this).find('a').attr('href');
});




});

</script>

Básicamente, lo que hace, es que tengo 2 divs, uno montado arriba (div class="qitem" style="width:180px; heigh:180px;")y que tiene una imagen dentro (del mismo tamaño del div) y un div (class="witem" style="width:130px; heigh=130px;").

El .qitem, al pasar por hover, su imagen se divide en 4 partes (desde el centro, una cruz) y se va hacia cada esquina, lo cual, te muestra el contenido del div interior.

Y e aquí el Problema! cuando hago la ejecución del mismo, SÓLO ME TOMA LAS VARIABLES DEL QITEM. Si hago el RollOver sobre .witem no me toma, o me toma, pero bajo los parámetros de imagen del .qitem (180x180px, en vez de 130x130px)

Algo que se les ocurra?

Ya he probado con Atributo if(), else e intentando sentenciarlo dentro del archivo destacado.js pero, no logro hacerlo partir correctamente.

El Archivo Destacados sólo trae Logarítmos y otros códigos de trabajo de variables, no llama directamente a ningun archivo ni variable llamada dentro del html.

Por Favor! De esto depénde mi título de diseñador web (nisiquiera soy programador, me manejo en css, html y flash, pero no en programación! xD)

De Antemano Muchas Gracias!! :D


P.D: Ejemplo de mi HTML y sus DIVS.

<div class="qitem" id="1">
<a href="http://www.kmasu.com"><img src="img/kmasu180.png" alt="Test 1" title="" width="180" height="180"/></a>
<span class="caption"><h4>Ven a KMASU</h4><p>Celebra tu cumpleaños con un 50% Off!!, sólo en www.micumple.cl</p></span>
</div>

<div class="witem">
<a href="http://www.kmasu.com"><img src="img/kmasu.png" alt="Test 1" title="" width="130" height="130"/></a>
<span class="caption"><h4>Ven a KMASU</h4><p>Celebra tu cumpleaños con un 50% Off!!, sólo en www.micumple.cl</p></span>
</div>

Y una Fotito de Referencia:

http://imageshack.us/photo/my-images/856/capturadepantalla201105fc.png/
http://imageshack.us/photo/my-images/543/capturadepantalla201105y.png/

[Dany_s]

mmm primero fijate este cálculo

var neg2 = Math.round($('.witem').width() / 2) * (-1)
var pos2 = neg * (-1);
var out2 = pos * 2;

neg no está definido, creo que ahi quieres hacer neg2

[venommist]

gracias man, eso era, se me había escapado jajaja, Saludos!