[JQuery] Animare div Specifico

N

netkingZ

Nuovo Utente
8 Ott 2013
8
0
0
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

MAeSI

Utente Attivo
13 Apr 2014
71
1
8
quellidelcucuzzolo.blogspot.it
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...
 
N

netkingZ

Nuovo Utente
8 Ott 2013
8
0
0
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 ... ;)
 
Devi accedere o registrarti per poter rispondere.
Discussioni simili
Autore Titolo Forum Risposte Data
D Jquery - modifica elemenento onlick jQuery 1
E Problema jquery Success jQuery 2
R jquery che cambia css di un elemento non mi funziona sulla pagina caricata da ajax Ajax 5
E PHP & jQuery PHP 8
P jquery refresh div non funziona Javascript 0
P lanciare script asp (o php) da jquery Javascript 1
T aiuto per trasformare un quiz fatto in JS in un quiz in JQUERY jQuery 0
Z CSS Slideshow senza JS e JQUERY HTML e CSS 2
Z CSS Slideshow senza JS e JQUERY HTML e CSS 2
MarcoGrazia Validazione remota tramite plugin (jquery validate) Snippet Javascript 0
M Come selezionare e deselezionare radiobutton con jquery jQuery 1
M Come validare textarea con jquery jQuery 0
R Aggiornare record mysql con Ajax, jQuery e php Ajax 2
P Funzione jQuery Ajax invio file a php jQuery 1
Cosina Menu fisso copre i titoli quando cliccati nel sommario jQuery Javascript 4
MarcoGrazia jquery validate() controllo checkbox jQuery 2
D assegnare risultato di una jquery ad una text Javascript 2
felino [JQuery] Append dopo ultimo ul li del primo livello jQuery 2
A php metodo post jquery non da mai errore jQuery 4
T problema con select dinamica con jquery Javascript 0
P jquery .load jQuery 10
E Div che scompare con scroll jquery Javascript 0
T script jquery non funziona più dopo il passaggio a MVC jQuery 5
B jQuery - hide & show li items jQuery 13
Y jQuery Animation Switch On Off jQuery 0
claudio_lorenzo [Javascript] aiuto su jquery per calcolo altezze dom Javascript 1
O [Javascript] Conflitto Jquery: forse... Javascript 0
MarcoGrazia jquery validate, necessità di validare almeno un elemento select su due jQuery 1
M inserire i dati ottenuti da una jquery in una tabella già esistente jQuery 1
D Jquery, conflitto tra loro risolvibile? jQuery 7
M Filtrare risultati con valori checkbox passati con jquery jQuery 2
Tommy03 Variabile PHP dentro a JQuery PHP 3
L Problema jQuery validation AJAX (PHP 7) PHP 6
G Campo HTML input file con jQuery jQuery 0
P Jquery event nel foreach php jQuery 3
M leggere con jquery/ajax in una function javascript record di database sql server Javascript 0
A [Javascript] Ajax, Jquery e PHP Javascript 1
trattorino Mentions Auto Suggesting da jquery a php PHP 2
X Problema con jquery e ajax jQuery 2
G Inserzione script nella pagina html per jquery jQuery 8
MarcoGrazia Validazione forum con jquery.validate jQuery 2
Shyson Smoot scrolling jQuery nella pagina jQuery 0
felino [Javascript] [jQuery] Slick Carousel: visualizzare una porzione dell'immagine successiva Javascript 0
L Scelta form con jquery jQuery 1
F [Javascript] Aprire file tramite jquery Javascript 0
R Aiuto Jquery jQuery 1
G [HTML] Jquery e tooltipster's jQuery 5
I Jquery fadeout-fadein html data jQuery 0
trattorino Estrarre Nome Utente jquery div php PHP 9
L jquery e json controllo valori da determinate chiavi - keys jQuery 0

Discussioni simili

Alto Basso