[JQuery] Animare div Specifico

**netkingZ** · 07-08-2014, 08:43

Salve io ho questo codice:

HTML:

codice:

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">


<div class ="boxTeam">
  <div class="boxLogo">
    <div class="boxLogoInside">nome clan</div>
  </div>
  <div class="boxInfo">
    
    <div class="boxCategory">
      <div class="boxElemTag">
        <i class="fa fa-users"></i>
      </div>
      <div class="boxUsername"></div>
      <div class="boxElemRole">
        <i class="fa fa-star"></i>
      </div>
      <div class="boxElemGamertag">
          <i class="fa fa-gamepad"></i>
      </div>
      <div class="boxElemDate">
          <i class="fa fa-calendar"></i>
      </div>
    </div>
    <!--DIVISORIO-->
    <div class="boxData">
      <div class="boxElemTagData">[eD]</div>
      <div class="boxUsernameData">username</div>
      <div class="boxElemRoleData">[Leader]</div>
      <div class="boxElemGamertagData">netkingZ</div>
      <div class="boxElemDateData">12 Aug 1987 12:00</div>
    </div>
    
    <div class="boxData">
      <div class="boxElemTagData">[eD]</div>
      <div class="boxUsernameData">username</div>
      <div class="boxElemRoleData">[Leader]</div>
      <div class="boxElemGamertagData">netkingZ</div>
      <div class="boxElemDateData">12 Aug 1987 12:00</div>
    </div>
    
    <div class="boxData">
      <div class="boxElemTagData">[eD]</div>
      <div class="boxUsernameData">username</div>
      <div class="boxElemRoleData">[Leader]</div>
      <div class="boxElemGamertagData">netkingZ</div>
      <div class="boxElemDateData">12 Aug 1987 12:00</div>
    </div>
    
  </div>
</div>


<div class ="boxTeam">
  <div class="boxLogo">
    <div class="boxLogoInside">nome clan</div>
  </div>
  <div class="boxInfo">
    
    <div class="boxCategory">
      <div class="boxElemTag">
        <i class="fa fa-users"></i>
      </div>
      <div class="boxUsername"></div>
      <div class="boxElemRole">
        <i class="fa fa-star"></i>
      </div>
      <div class="boxElemGamertag">
          <i class="fa fa-gamepad"></i>
      </div>
      <div class="boxElemDate">
          <i class="fa fa-calendar"></i>
      </div>
    </div>
    <!--DIVISORIO-->
    <div class="boxData">
      <div class="boxElemTagData">[eD]</div>
      <div class="boxUsernameData">username</div>
      <div class="boxElemRoleData">[Leader]</div>
      <div class="boxElemGamertagData">netkingZ</div>
      <div class="boxElemDateData">12 Aug 1987 12:00</div>
    </div>
    
    <div class="boxData">
      <div class="boxElemTagData">[eD]</div>
      <div class="boxUsernameData">username</div>
      <div class="boxElemRoleData">[Leader]</div>
      <div class="boxElemGamertagData">netkingZ</div>
      <div class="boxElemDateData">12 Aug 1987 12:00</div>
    </div>
    
    <div class="boxData">
      <div class="boxElemTagData">[eD]</div>
      <div class="boxUsernameData">username</div>
      <div class="boxElemRoleData">[Leader]</div>
      <div class="boxElemGamertagData">netkingZ</div>
      <div class="boxElemDateData">12 Aug 1987 12:00</div>
    </div>
    
  </div>
</div>

CSS:

codice:

.boxTeam {            min-height:150px;
            height:auto;
            width:700px;
            background-color:#171717;
            position:relative;
            -webkit-border-top-left-radius: 10px;
            -webkit-border-top-right-radius: 10px;
            -moz-border-radius-topleft: 10px;
            -moz-border-radius-topright: 10px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            float:left;
            margin:0px 10px 10px 0px;
}


.boxLogo {
            height:150px;
            width:25%;
            position:relative;
            float:left;
  
}


.boxLogoInside {
            height:130px;
            width:100%;
            margin-top:20px;
      background: url('http://i.minus.com/ibulYsQHGZtASK.jpg') no-repeat;
            background-size:cover;
            color:#fff;
            font-size:16px;
            line-height:200px;
            text-align:center;
            overflow:hidden;
            text-transform:uppercase;


}


.boxInfo {
            height:auto;
            width:75%;
            background-color:#333;
            position:relative;
            float:left;
}


.boxCategory {
            height:50px;
            width:100%;
            background-color:#171717;
}


.boxUsername {
            height:50px;
            width:25%;
            float:left;
            text-align:center;
            line-height:50px;
            color:#fff;
}




.boxElemTag {
            height:50px;
            width:12%;
            float:left;
            text-align:center;
            line-height:50px;
            color:#fff;
}


.boxElemRole {
            height:50px;
            width:15%;
            float:left;
            text-align:center;
            line-height:50px;
            color:#fff;
}


.boxElemGamertag {
            height:50px;
            width:25%;
            float:left;
            text-align:center;
            line-height:50px;
            color:#fff;
}


.boxElemDate {
            height:50px;
            width:23%;
            float:left;
            text-align:center;
            line-height:50px;
            color:#fff;
}


.boxData {
            height:50px;
            width:100%;
            background-color:#222;
            border-bottom:1px dotted #666;
}


.boxElemTagData {
            height:50px;
            width:12%;
            font-size:14px;
            float:left;
            text-align:center;
            line-height:50px;
            color:#fff;
            
}


.boxUsernameData {
            height:50px;
            width:25%;
            float:left;
            text-align:center;
            line-height:50px;
            color:#fff;
           // border-left:1px dotted #666;
}


.boxElemRoleData {
            height:50px;
            width:15%;
            float:left;
            text-align:center;
            line-height:50px;
            color:#fff;
            font-size:14px;
            //border-left:1px dotted #666;
}




.boxElemGamertagData {
            height:50px;
            width:25%;
            float:left;
            text-align:center;
            line-height:50px;
            color:#fff;
            font-size:14px;
           // border-left:1px dotted #666;
}


.boxElemDateData {
            height:50px;
            width:22%;
            font-size:14px;
            float:left;
            text-align:center;
            line-height:50px;
            color:#fff;
           // border-left:1px dotted #666;
}

JQUERY:

codice:

$(document).ready(function(){  
  $('.boxTeam').width('200px');
  $('.boxTeam').height('150px');
  $('.boxInfo').width('0px');
  $('.boxLogo').width('100%');
  $('.boxCategory').width('0px');
  $('.boxData').width('0px');
  
  


  
  $('.boxTeam').css("cursor","pointer").click(function() {


    
        $('.boxTeam').animate({
                width: "100%",
                height: "auto",
                minHeight:"150px"
          });
    
         $('.boxInfo').animate({
                width: "70%",
                height: "auto",
                minHeight:"150px"
          });
    
         $('.boxLogo').animate({
                width: "30%"
          });
    
          $('.boxCategory').animate({
                width: "100%",
                height: "50px"
          });
    
          $('.boxData').animate({
                width: "100%",
                height: "50px"
          });
 
    });
  
  $('.boxTeam').mouseout(function() {
        $('.boxTeam').animate({
                width: "200px",
                height: "150px"
          });
        $('.boxInfo').animate({
                width: "0%",
                height: "auto",
                minHeight:"150px"
          });
    
         $('.boxLogo').animate({
                width: "100%"
          });
  });
  
});

Ma quello che succede è che ovviamente per tutti gli elementi che hanno quelle classi si avvia l'animazione una volta che si è cliccato su di essi , come posso fare in modo che si animi solo il div che clicco?

Ho provato ad usare this ma non funziona , molto probabilmente sbaglio io ...

Dovendo creare molti "elementi" con le stesse classi non posso personalizzarle ognuna per ogni "elemento".

Grazie della disponibilità

**echoweb** · 07-08-2014, 09:07

ciao,

prova cosi...

codice:

<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** · 07-08-2014, 09:24

Originariamente inviata da echoweb

ciao,

prova cosi...

codice:

<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** · 07-08-2014, 09:26

aggiungi l'id ai box:

codice:

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

**netkingZ** · 07-08-2014, 09:44

Cosi funziona , ma i div interni al boxTeam che sono contenuti nel div boxInfo sembra che perdano le caratteristiche delle classi , come posso risolvere?

**netkingZ** · 07-08-2014, 10:20

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!!!

Discussione: [JQuery] Animare div Specifico

Strumenti discussione

Ricerca discussione

Visualizza

[JQuery] Animare div Specifico

Permessi di invio