slideUp не работает после slideDown

Question

slideUp не работает после slideDown с использованием jQuery 1.10. Вот скрипка: fiddle

HTML состоит из «заголовка« grid-grid-header »li с соответствующим« содержанием-grid-content »и между ними соединительной линией.

<ul id="health-grid"> 
 
    <li class="health-grid-header"> 
 
     <div id="health-header-1"> 
 
      <p>Lorem Ipsum</p> 
 
     </div> 
 
    </li> 
 
</ul> 
 
<div id="health-grid-container"> 
 
    <div id="health-line"></div> 
 
    <div id="health-grid-1" class="health-grid-content"> 
 
     <p>Lorem Ipsum<span class="yellow-close-icon"></span> 
 

 
     </p> 
 
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 
    </div> 
 
</div>

Во-первых, я скрыть строку и содержание. Затем, когда щелкнул заголовок, я использую slideDown для анимации и отображения содержимого и строки.

var healthGridShowed = false; 
 
$('.health-grid-content, #health-line').hide(); 
 
$('.health-grid-header').click(function() { 
 
    // first check if the content is visible // 
 
    if (healthGridShowed) { 
 

 
    } else { 
 
     // if not visible // 
 
     var newContentIdNum = $(this).children().first().attr('id').slice(-1); 
 
     var lineHalfWidth = $('#health-line').outerWidth(); 
 
     var headerPosition = $(this).position(); 
 
     var headerHalfWidth = $(this).width()/2; 
 
     $('#health-line').css({ 
 
      left: (headerHalfWidth + headerPosition.left - lineHalfWidth) 
 
     }); 
 
     $('#health-line').slideDown(500); 
 
     $('#health-grid-' + newContentIdNum).slideDown(500).delay(500, function() { 
 
      $('#health-grid-' + newContentIdNum).addClass('health-active'); 
 
     }); 
 
    } 
 
});

содержания имеет небольшие й на верхних правом угол для разрушения расширяемого сечения. После нажатия должен свернуть его, используя slideUp. Однако ничего не происходит.

$('.yellow-close-icon').click(function() { 
 
    $('.health-active').slideUp(500, function() { 
 
     $('#health-line').slideUp(500); 
 
    }); 
 
});

Если бы я только попробовать скольжение вверх по линии это произойдет, но не содержание.

Благодаря

Answer 1

часть, где вы добавления classhealth-active, я изменил его на

$('#health-grid-' + newContentIdNum).addClass('health-active').slideDown(500); 

Или вы также можете написать это как

$('#health-grid-' + newContentIdNum).slideDown(500, function(){ 
$(this).addClass('health-active'); 
}); 

Если вы хотите addClass после fadeOut() Завершается.

И он работает. Вы были unnecesarily с помощью .delay

Работа Fiddle