Jak wyłączyć sumowanie się akcji jquery dla każdego elementu div, do którego przypisana jest jedna akcja ?

pytanie zadane 7 listopada 2017 w JavaScript przez DariuszH Gaduła (3,100 p.)

Chodzi o to, że mam 3 divy i każdy div ma jedną akcję wyznaczoną przez kod jquery. Problem polega na tym, że wszystkie akcje działają na siebie nawzajem tj. element 1 przyjmuje swój rozkaz oraz przeznaczony dla 2 i 3, analogicznie dla 2 rozkazy 1 i 3 i swój. Jak to wyłączyć ? Rozumiem, że kod wykonuje się z góry do dołu, ale przypisanie chyba też obowiązuje.

      $(document).ready(function(){
            $(".web_designer").each(function(){

                $(".web_designer").fadeIn(1000);
            });
        }); 
        
        
       
          $(document).ready(function(){
            $(".passion").each(function(){

                $(".passion").show(1000);
            });
        }); 
        
    
   $(document).ready(function(){
                $(".window_learn").each(function(){
                    $(".window_learn").slideDown(500);
                });
       
   });

.window_learn{
    display: none;
    width:38%;
    height:5vh;
    float:left;
    
    margin-left: 30%;
    margin-top:36vh;
   animation-name: w_dol;
    animation-duration:1s;
}

  





.html5,.jquery,.css3,.php5,.sql{
    
  font-size:5vh;
  float:left;
   padding-left: 3.4vh;
        
     font-family: 'Abel';
  font-style: normal;
  font-weight: 400;
    
}


.web_designer{
    
    width:50%;
    height: :10vh;
    display: none;
    float:left;
    margin-top: 3vh;
    margin-left: 25%;
    
   
    text-align: center;
    line-height: 4vh;
    font-size: 11vh;
   font-family: 'Archivo Black';
   font-style: normal;
   font-weight: 400;
    color:dodgerblue;
    
}

.passion{
    width:21%;
    
   display: none;
    height: 4vh;
    clear: both;
    float:left;
    margin-top: 3vh;
    margin-left: 109vh;
   
text-align: center;
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
font-size:3vh;
    
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<link rel="stylesheet" href="index.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">   
<link href="https://fonts.googleapis.com/css?family=Archivo+Black" rel="stylesheet">  
 <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 
<link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet">
    
    
</head>

<body>

    
    
            
<div class="header">
     
         <div class="face"> <img src="face.png" style="widht:5vh; height:5vh; "></div> 
    
         <div class="twitter"> <img src="twitter.png" style="widht:5vh; height:5vh; "></div> 
    
    
         <div class="mail"> <img src="mail.png" style="widht:5vh; height:5vh; "></div> 
    
  
         <div class="dane">  <div class="name">DARIUSZ </div><div class="surname"> HOZER</div></div>
    </div>   
    

    
    
<div class="main">
    
      <div class="window_learn">
            <div class="html5">HTML5</div>
            <div class="jquery">JQUERY</div>
            <div class="css3">CSS3</div>
            <div class="php5">PHP5</div>
            <div class="sql">MySQL</div>
     </div>
    
    
        <div class="web_designer">WEB DESIGNER</div> 

        <div class="passion">PASJA TWORZENIA STRON</div>
    
 </div>
    
    

    


  
   
    
    
</body>

</html>

1 odpowiedź

odpowiedź 7 listopada 2017 przez pablop76 VIP (123,180 p.)

Witam. Funkcja .each() to pętla,która przechodzi po wszystkich elementach pobranej kolekcji, a Ty działasz na jednym elemencie więc po co Ci ona. Wystarczy wywołać efekty po kolei.

$(document).ready(function(){
  $(".window_learn").slideDown(500,function(){
    $(".web_designer").fadeIn( 500,function(){
      $(".passion").show(1500);
    });
  });
});

komentarz 7 listopada 2017 przez DariuszH Gaduła (3,100 p.)

Dziękuję bardzo za pomoc :) Kolejny problem to taki, że gdy wszystko jest już ok, responsywność, efekty i pozycje elementów, to gdy po wcisnięciu f11 (na pełny ekran) to te elementy się rozlatują. Czy wiesz jak to zrobić, by proporcje ukladu zostały zachowane ?

komentarz 7 listopada 2017 przez pablop76 VIP (123,180 p.)

Masz bałagan w jednostkach. Odstępy w poziomie oraz fonty uzależniasz od viewport w pionie.

(margin-left: 109vh; padding-left: 3.4vh; font-size:3vh;) Powinieneś zastosować dla tych elementów viewport uzalezniony od szerokości vw.

komentarz 7 listopada 2017 przez DariuszH Gaduła (3,100 p.)

Dzięki, działa :) Masz wiedzę :)

komentarz 7 listopada 2017 przez DariuszH Gaduła (3,100 p.)

I ostatnie pytanko na dziś :) Kod już masz :) Dlaczego jak tworzę kolejnego diva (prosta 100%, tak jak header) rusza się włącznie z animacją loga (webdesigner) ? Prosta jest oddalona od loga o jakieś 50vh w dół strony

komentarz 7 listopada 2017 przez pablop76 VIP (123,180 p.)

Za dużo chaosu w tym kodzie, dlatego trudno coś poradzić. Problem lezy między innymi po stronie float: left; Nie można ich tak bezkarnie stosować bez czyszczenia przepływu ponieważ element wyjęty z obiegu powoduje, że element go zawierający nie posiada wysokości. Więc twoja stopka zamiast być na dole jest na górze.