[JQuery] Animare div Specifico

netkingZ · 2014-08-07T08:44:32+0200

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à

MAeSI · 2014-08-07T14:12:06+0200

Ciao,

per l'uso di this puoi provare in questo modo: this rappresenta l'elemento che viene cliccato, con find('.nomeclasse') lo specifico elemento figlio su cui attivare l'animazione

Codice:

 $('.boxTeam').css("cursor","pointer").click(function() {
  
        $(this).animate({
                width: "100%",
                height: "auto",
                minHeight:"150px"
          });
    
         $(this).find('.boxInfo').animate({
                width: "70%",
                height: "auto",
                minHeight:"150px"
          });

[....]

..mi sa però che poi dovrai sistemare altro...

netkingZ · 2014-08-07T14:24:53+0200

Grazie ma nel frattempo ho gia risolto cosi :

Codice:

$(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: "75%",
                    height: "auto",
                    minHeight:"150px"
              });


             $(_id + '>.boxLogo').animate({
                    width: "25%",
                     height: "auto"
              });


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


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


        });


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


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

Inserendo gli id ai div denominati boxTeam .
Grazie ...

Cerca

Cerca

[JQuery] Animare div Specifico

netkingZ

Nuovo Utente

MAeSI

Utente Attivo

netkingZ

Nuovo Utente

Discussioni simili