Прервать анимацию

@Jasta · Регистрация: 20.02.2016

Author24 — интернет-сервис помощи студентам

Всем доброго времени суток. Сделал слайдер в котором при клике на различные изображение, постепенно с задержкой появляются абзацы. Но возникла проблема, если не дождаться пока выйдут все абзацы, и кликнуть на следующее изображение, то не успевшие появиться абзацы, не скроются и продолжат выезжать, наезжая на новые абзацы. Подскажите плиз как это исправить.
Вот код:

HTML5

  <ul >
<li style="position: absolute; margin-top: 140px;" ><img src="img/search_information.png" class="media"  onclick="addEffect1()" style="margin-left: 35px" /><p class="caption">Сбор инофрмации</p></li>
  <li style="position: absolute; margin-top: 80px; margin-left: 300px">  <img src="img/development.png" onclick="addEffect()"   class="media" style="margin-left: 32px;" /><p class="caption">Проектирование</p></li>
      
       <li style="position: absolute; margin-top: 0px; margin-left: 600px"  > <img src="img/delivery.png" onclick="addEffect2()" class="media" style="margin-left: 10px;"/><p class="caption" >Доставка</p></li>
       <li style="position: absolute; margin-top: 80px; margin-left: 900px "><img src="img/screwdriver.png" onclick="addEffect3()" class="media" /><p class="caption" >Монтаж</p></li>
       <li style="position: absolute; margin-top: 140px; margin-left: 1200px " onclick="addEffect1()"><img src="img/sevise.png" onclick="addEffect3()" class="media" /><p class="caption" >Обслуживание</p></li>
 
    </ul>
         <div class="" id="pay">
             <p id="1" class="content" name="q">Бла бла бла у нас качество</p>
             <p id="2" class="content" name="q" style="margin-top: 330px;">Бла бла бла сделаем быстро</p>
             <p id="3" class="content" name="q" style="margin-top: 360px;">Бла бла бла у нас дешевле</p>
             <p id="4" class="content" name="q" style="margin-top: 390px;">КУПИТЕ ЧТО НИБУДЬ ПОЖАЛУЙСТА</p>
            
         </div >
         <div class="" id="quality" >
             <p id="5" class="hid" name="q">Бла бла бла мы лучшие</p>
             <p  id="6" class="hid" name="q" style="margin-top: 330px;">Бла бла бла 300 лет на рынке диодного освещения</p>
             <p id="7" class="hid" name="q" style="margin-top: 360px;">Бла бла бла довольные клиенты</p>
             <p id="8"  class="hid" name="q" style="margin-top: 390px;">КУПИТЕ ЧТО НИБУДЬ ПОЖАЛУЙСТА</p>
            
         </div>
         <div class=""  >
             <p id="9" class="hid" name="q">Доставка</p>
             <p  id="10" class="hid" name="q" style="margin-top: 330px;">В лучшем виде</p>
             <p id="11" class="hid" name="q" style="margin-top: 360px;">Почтой России</p>
             <p id="12"  class="hid" name="q" style="margin-top: 390px;">ШУТКА!!!!</p>
            
         </div>

Javascript

function addEffect(){
    
 $("p[name = 'q']").hide().css("marginLeft", "700px");
   
  $("#5:hidden").animate({  opacity: "show", marginLeft: "500px",}, 1500);
     $("#6:hidden").delay(2000).animate({  opacity: "show", marginLeft: "500px",}, 1500);
     $("#7:hidden").delay(4000).animate({  opacity: "show", marginLeft: "500px",}, 1500);
    $("#8:hidden").delay(6000).animate({  opacity: "show", marginLeft: "500px",}, 1500);
 
}
       
      function addEffect1(){
 
 $("p[name = 'q']").hide().css("marginLeft", "700px");
  $("#1:hidden").animate({  opacity: "show", marginLeft: "500px",}, 1500);
     $("#2:hidden").delay(2000).animate({  opacity: "show", marginLeft: "500px",}, 1500);
     $("#3:hidden").delay(4000).animate({  opacity: "show", marginLeft: "500px",}, 1500);
    $("#4:hidden").delay(6000).animate({  opacity: "show", marginLeft: "500px",}, 1500);
         
 
}
               
        function addEffect2(){
            $("p[name = 'q']").hide().css("marginLeft", "700px");
  $("#9:hidden").animate({  opacity: "show", marginLeft: "500px",}, 1500);
     $("#10:hidden").delay(2000).animate({  opacity: "show", marginLeft: "500px",}, 1500);
     $("#11:hidden").delay(4000).animate({  opacity: "show", marginLeft: "500px",}, 1500);
    $("#12:hidden").delay(6000).animate({  opacity: "show", marginLeft: "500px",}, 1500);
}
        function addEffect3(){
             $("[id='lim']").attr("id", "limp");
 $("#limp").addClass('kill');
 
  $("#sex:hidden").animate({ opacity: "show",}, 1500);
     $('.sow').removeClass('sow').addClass('kill');
      $("#sex").addClass('sow');
      
      $("img[class = 'kill']").hide(); 
}

CSS

li {
    list-style: none;
     display: inline;
     
}
.media {
    width: 70px;
    height: 70px;
    margin-right: 10px;
    display: inline;
    
     
}
.step {
    display: inline-block; 
    top: 200px;
    left: 100px;
}
.caption {
    font-family: arial;
    font-weight: bold;
}
.fl {
    float: right;
}
.content {
    font-family: arial;
    margin-top: 300px;
    position: absolute;
    margin-left: 500px;
    text-align: center;
}
.hid {
    display: none;
    font-family: arial;
    margin-top: 300px;
    position: absolute;
    text-align: center;
    margin-left: 700px;
}
#p {
    animation: fdsseq .5s forwards;
   animation-delay: 1.5s;
}
.reserv {
    text-align: center;
}

	10.02.2017, 12:11