[Resolvido] Diminuir width de outros elementos

[lDouglas 0]

Fala galera Beleza ?

 

Então sou meio novato em javascript mechi muito pouco mesmo , porem tenho alguma experiencia em programação e CSS

 

bom minha duvida é a seguinte

 

Estou criando um banner no estilo "SANFONA" para este site

Negocio Animal

 

eu consegui criar o banner , só que eu queria que quando eu colocasse o mouse em cima da imagem , alem dela aumentar eu dimuiria todas as outras , só que não consigo fazer de jeito nenhum :\

 

eu quero que ela diminua pois se eu passo o mouse do jeito que ta ela ultrapassa o limite da div que eu coloquei jogando assim as imagens posteriores pra baixo .-.

 

aqui tem o code

 

 

	<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
   $('#sanfona li').hover( 
       function () {
           var $this = $(this);

           $this.stop().animate({'width':'575px'},500);//a função stop antes da animação é essencial
           $('.titulo',$this).stop(true,true).fadeOut();
           $('.bgDestaque',$this).stop(true,true).slideDown(500);
           $('.comentario',$this).stop(true,true).fadeIn();
       }, <!-- fecha function 01-->

       function () {
           var $this = $(this);
           $this.stop().animate({'width':'170px'},1000);
           $('.titulo',$this).stop(true,true).fadeIn();
           $('.comentario',$this).stop(true,true).fadeOut(500);
           $('.bgDestaque',$this).stop(true,true).slideUp(700);
       } <!-- fecha function 02-->
   );   <!-- fecha sanfona li-->
});       <!--fecha function principal-->

</script>  <!--end script -->

 

Alguem tem uma solução ?

Grato desde já (:

[William Bruno 1501]

esses comentários estão incorretos:

        } <!-- fecha function 02-->
   );   <!-- fecha sanfona li-->
});       <!--fecha function principal-->

use

 

//comentario

ou:

/* comentario */

 

 

você pode usar um .siblings() apartir do $this. Isso vai te devolver "todos os outros".

[lDouglas 0]

Opa mano Obrigado mesmo pela ajuda *----------------*

 

Então deu certo o que voce falou , porem me deparei com outro problema :3

 

Tipo da uma olhada , se não for pedir demais '-'

 

Negocio Animal

 

Antes dela voltar ao tamanho original , se eu passar o mouse em cima de outra imagem o restante ja vai pra baixo , e ficou meio bugado se eu passo o por cima de todas as imagens rapido, vira uma zona =O

 

 

o Code ficou assim

$(function() {
   $('#sanfona li').hover( //A primeira funçao é atribuir o efeito de hover aos li de um elemento da classe sanfona
       function () {
           var $this = $(this);// variavel "this" é um objeto jQuery,aqui temos a API jQuery completa à nossa disposição

           $this.stop().animate({'width':'575px'},500);//a função stop antes da animação é essencial
		$('.titulo',$this).stop(true,true).fadeOut();
           $('.bgDestaque',$this).stop(true,true).slideDown(500);
           $('.comentario',$this).stop(true,true).fadeIn();
		$this.siblings().animate({'width':'85px'},500);
	},

       function () {
           var $this = $(this);
           $this.stop().animate({'width':'170px'},100);
           $('.titulo',$this).stop(true,true).fadeIn();
           $('.comentario',$this).stop(true,true).fadeOut(500);
           $('.bgDestaque',$this).stop(true,true).slideUp(700);
		$this.siblings().animate({'width':'170px'},100);

       } // fecha function 02 
   );   // fecha sanfona li
});     // fecha function principal

 

Obrigadão mais uma vez (:

[lDouglas 0]

Depois de um pouco de sofrimento consegui arrumar (:

 

eu não tinha colocado a função

stop()

depois do

sibilings()

foi só eu colocar e a magica foi feita (:

 

Agradeço a ajuda mais uma vez a ajuda ,

e caso alguem tenha a mesma duvida.

 

foi só inserir a linha de code assim

$this.siblings().stop().animate({'width':'170px'},500);