做一個jQuery的元素向上滑動，如果另一個被點擊

Question

好了，所以我要尋找一個類似的功能像我這個頁面上找到：http://jsfiddle.net/B6TZS/

我需要幾乎同樣的事情。事實上，向下滑動是直接在單擊的元素下。不同之處在於我需要從每個元素的數據中加載某些數據。我希望數據在div滑落時淡入。另外，當點擊一個不同的網格元素時，我希望動畫能夠淡入淡出，並以淡入淡出的方式向下滑動。下面是我的代碼。我越來越掛上如何應用活動類，以及如何確定如何刪除鏈接到過渡動畫的鏈接。

<div class="container leaderShipwrapper gallery-items"> 
    <ul id="items" class="row list-unstyled"> 
     <div class="col-sm-12 col-sm-offset-1 leaderShipgrid"> 
      <li class="col-sm-2 col-xs-4 leader" data-name="joe" data-title="developer" data-profile="profile"><img class="image-responsive" src="images/leader.jpg" alt="" /></li> 
      <li class="col-sm-2 col-xs-4 leader" data-name="ray" data-title="dunce" data-profile="dunce profile"><img class="image-responsive" src="images/leader.jpg" alt="" /></li> 
      <li class="col-sm-2 col-xs-4 leader" data-name="joe" data-title="developer" data-profile="profile"><img class="image-responsive" src="images/leader.jpg" alt="" /></li> 
      <li class="col-sm-2 col-xs-4 leader" data-name="joe" data-title="developer" data-profile="profile"><img class="image-responsive" src="images/leader.jpg" alt="" /></li> 
      <li class="col-sm-2 col-xs-4 leader" data-name="joe" data-title="developer" data-profile="profile"><img class="image-responsive" src="images/leader.jpg" alt="" /></li> 
     </div> 
     <div class="col-sm-10 col-sm-offset-1"> 
      <li id="1" class="leaderDescription"><div class="leaderName"></div><div class="leaderTitle"></div><div class="leaderProfile"></div></li> 
     </div> 
    </ul> 
</div> 

<script> 
     $('.leaderDescription').hide(); 
     $('.leader').click(function(){ 


    if ($(this).hasClass('active')){ 
     /* hide the next content div*/ 
     $(this).next('.leaderDescription').slideUp(); 
     /* and remove the active class*/ 
     $(this).toggleClass('active'); 
    } 
    else { 
     /* slide the content div down */ 

     $(this).next('.leaderDescription').slideDown(); 
     /* and add the active class*/ 
     $(this).addClass('active').slideDown('slow'); 

    } 


    $(this).parent().siblings().find('.leaderDescription').find('.leaderName').text($(this).attr('data-name')); 
    $(this).parent().siblings().find('.leaderDescription').find('.leaderTitle').text($(this).attr('data-title')); 
    $(this).parent().siblings().find('.leaderDescription').find('.leaderProfile').text($(this).attr('data-profile')); 
    $(this).parent().siblings().find('.leaderDescription').slideDown('slow').addclass('active'); 


    }); 
</script> 

好的，所以我認爲新的問題是與JavaScript。這是當我點擊第一行的第一個框時正在發生的事情的照片。

Answer 1

早上好，

我會嘗試這樣的事：基於評論

<script> 
    $('.leaderDescription').hide(); 
    $('.leader').click(function(){ 

     var descriptionDiv = $(".leaderDescription"); 

     if ($(this).hasClass('active')){ 
      // hide the content div 
      $(descriptionDiv).slideUp(); 

      // and remove the active class from the .leader and content div 
      $(descriptionDiv).removeClass("active"); 
      $(this).removeClass('active'); 
     } 
     else { 
      // Remove "active" from all .leader divs 
      $(".leader").removeClass("active"); 

      // Add "active" class to the one just clicked 
      $(this).addClass("active"); 

      // Slide up the content div if it is already open while we are updating data, before re-opening, similar to the JSFiddle you posted 
      if ($(descriptionDiv).hasClass("active")) { 
       // Remove active class 
       $(descriptionDiv).removeClass("active"); 
       var $this = this; 
       $(descriptionDiv).slideUp("500", function() { 
        $($this).after(descriptionDiv); 
        // Update our data 
        UpdateData($this); 
        // Re-open it. 
        $(descriptionDiv).slideDown('slow').addClass('active'); 
       }); 
      } 
      else { 
       $(this).after(descriptionDiv); 
       // Update our data 
       UpdateData(this); 
       $(descriptionDiv).slideDown('slow').addClass('active'); 
      } 
     } 
    }); 

    function UpdateData(thisElement) { 
     var descriptionDiv = $(".leaderDescription"); 
     // Update our data 
     $(descriptionDiv).find('.leaderName').text($(thisElement).attr('data-name')); 
     $(descriptionDiv).find('.leaderTitle').text($(thisElement).attr('data-title')); 
     $(descriptionDiv).find('.leaderProfile').text($(thisElement).attr('data-profile')); 
    } 
</script> 

<style> 
    .leaderDescription { 
     transition: opacity .5s ease-in-out; 
     -moz-transition: opacity .5s ease-in-out; 
     -webkit-transition: opacity .5s ease-in-out; 

     opacity: 0; 
    } 

    .leaderDescription.active { 
     opacity: 1; 
    } 
</style> 

，我已經更新了這個答案，並張貼在Bootply： http://www.bootply.com/KsMdBmmOdD

用div替代UL/LI： http://www.bootply.com/MW55yyE6D7

製造充分響應：
http://www.bootply.com/Mi2q0SNMZs