[JQuery] Animare div Specifico

[echoweb]

ciao,

prova cosi...

<script>


$(document).ready(function(){  
  $('.boxTeam').width('200px');
  $('.boxTeam').height('150px');
  $('.boxInfo').width('0px');
  $('.boxLogo').width('100%');
  $('.boxCategory').width('0px');
  $('.boxData').width('0px');
  
  
  $(".boxTeam").each(function () {
    work(this.id);
  });


  function work(_id)
  {
        var _id = '#' + _id;
        
        $(_id ).css("cursor","pointer").click(function() {


            $(_id).animate({
                    width: "100%",
                    height: "auto",
                    minHeight:"150px"
              });


             $(_id + '>.boxInfo').animate({
                    width: "70%",
                    height: "auto",
                    minHeight:"150px"
              });


             $(_id + '>.boxLogo').animate({
                    width: "30%"
              });


              $(_id + '>.boxCategory').animate({
                    width: "100%",
                    height: "50px"
              });


              $(_id + '>.boxData').animate({
                    width: "100%",
                    height: "50px"
              });


        });


        $(_id).mouseout(function() {
            $(_id).animate({
                    width: "200px",
                    height: "150px"
              });
            $(_id + '>.boxInfo').animate({
                    width: "0%",
                    height: "auto",
                    minHeight:"150px"
              });


             $(_id + '>.boxLogo').animate({
                    width: "100%"
              });
        });
  
  
  } 
  
    
  
});
</script>

[netkingZ]

ciao,

prova cosi...

<script>


$(document).ready(function(){  
  $('.boxTeam').width('200px');
  $('.boxTeam').height('150px');
  $('.boxInfo').width('0px');
  $('.boxLogo').width('100%');
  $('.boxCategory').width('0px');
  $('.boxData').width('0px');
  
  
  $(".boxTeam").each(function () {
    work(this.id);
  });


  function work(_id)
  {
        var _id = '#' + _id;
        
        $(_id ).css("cursor","pointer").click(function() {


            $(_id).animate({
                    width: "100%",
                    height: "auto",
                    minHeight:"150px"
              });


             $(_id + '>.boxInfo').animate({
                    width: "70%",
                    height: "auto",
                    minHeight:"150px"
              });


             $(_id + '>.boxLogo').animate({
                    width: "30%"
              });


              $(_id + '>.boxCategory').animate({
                    width: "100%",
                    height: "50px"
              });


              $(_id + '>.boxData').animate({
                    width: "100%",
                    height: "50px"
              });


        });


        $(_id).mouseout(function() {
            $(_id).animate({
                    width: "200px",
                    height: "150px"
              });
            $(_id + '>.boxInfo').animate({
                    width: "0%",
                    height: "auto",
                    minHeight:"150px"
              });


             $(_id + '>.boxLogo').animate({
                    width: "100%"
              });
        });
  
  
  } 
  
    
  
});
</script>

Non fa nulla , non parte neanche l'animazione , devo inserire altro da qualche altra parte?

[echoweb]

aggiungi l'id ai box:

...
<div class ="boxTeam" id="boxTeam1">
...
<div class ="boxTeam" id="boxTeam2">
...

[netkingZ]

Schermata 2014-08-07 alle 10.14.47.jpg

Questo dovrebbe essere il risultato finale quando si clicca su uno dei due div ma gli elementi interni si scompongono cosi :

Schermata 2014-08-07 alle 10.17.39.jpg

come posso risolvere?

EDIT:

Risolto gestendo la successione delle classi con il maggiore [>]

GRAZIE!!!