切換類和向下滑動

Question

我正在尋找解決這一問題的最好辦法，這裏是我的html：

  <div class="section group"> 
       <article class="col span_1_of_4"> 
        <h3>Design</h3> 
        <div id="design" class="circle"> 
         <div class="icon icon-pencil"></div> 
        </div>        
       </article> 
       <article class="col span_1_of_4"> 
        <h3>Development</h3> 
        <div id="development" class="circle"> 
         <div class="icon icon-code"></div> 
        </div> 
       </article> 
       <article class="col span_1_of_4"> 
        <h3>Branding</h3> 
        <div id="branding" class="circle"> 
         <div class="icon icon-tag"></div> 
        </div> 
       </article> 
       <article class="col span_1_of_4"> 
        <h3>Mobile</h3> 
        <div id="mobile" class="circle"> 
         <div class="icon icon-mobile-phone"></div> 
        </div> 
       </article> 
      </div> 
      <div id="services"> 
       <div class="design"> 
        some text 
       </div> 
       <div class="development"> 
        some text     
       </div> 
       <div class="branding"> 
        some text     
       </div> 
       <div class="mobile"> 
        some text     
       </div> 
      </div> 

而且我的javascript：

$('#about .circle').click(function(e) { 
    if ($('#about .circle').hasClass('enabled')) { 
     $('.design, .development, .branding, .mobile').slideUp(); 
    } 
    if ($(this).hasClass("enabled")) { 
     $(this).removeClass("enabled"); 
    } else {    
     $('#about .circle').removeClass("enabled"); 
     $(this).addClass("enabled"); 
     $('.'+$(this).attr('id')).slideDown(); 
    } 
}); 

我只是希望它的切換點擊圓圈時，圈子下面的文字就會顯示在類別下方。我希望它上下滑動，但如果你點擊另一個圓圈，我希望它向上滾動，然後完成動畫，然後下來。目前它同時滑動它們兩個。我知道你可以通過一個完整的功能來滑動，使其只能滑下來，但它沒有奏效。

如果有人知道更好的方式讓我知道！

感謝

Answer 1

您需要檢查是否存在需要被隱藏的可見元素：

• 如果有一個，然後把它隱藏和顯示下一個元素時隱藏動畫完成
• 如果沒有然後下一個元素

代碼的粗糙輪廓：

// hide elements on page load 
$("#services > div").hide(); 
$("#about .circle").click(function (e) { 
    var classToShow = "." + $(this).attr("id"); 
    // do nothing if element is already visible 
    if ($("#services > div" + classToShow + ":visible").length) { 
     return; 
    } 
    // stop existing animations 
    if ($("#services > div:animated").length) { 
     $("#services > div:animated").stop(); 
    } 
    // if an element needs to be hidden 
    if ($("#services > div:visible").length) { 
     // hide it 
     $("#services > div:visible").slideUp("slow", function() { 
      // show next element when first animation completes 
      $("#services > div" + classToShow).slideDown("slow"); 
     }); 
    } else { 
     // just show next element 
     $("#services > div" + classToShow).slideDown("slow"); 
    } 
}); 

Demo here

Answer 2

添加一類目標的服務元素，如

<div id="services"> 
    <div class="design target">some text</div> 
    <div class="development target">some text</div> 
    <div class="branding target">some text</div> 
    <div class="mobile target">some text</div> 
</div> 

然後

jQuery(function ($) { 
    var $targets = $('#services .target'); 
    var $cirlces = $('#about .circle').click(function (e) { 
     $(this).addClass('enabled'); 
     var $target = $('.' + this.id).stop(true).slideDown(); 
     $targets.not($target).stop(true).slideUp(); 
    }); 
}); 

演示：Fiddle

Answer 3

請嘗試以下

 //First time it has to SlideUp 
     $('#about .circle').addClass("enabled"); 

     //Click event 
     $('#about .circle').click(function (e) { 
      var $this = $(this); 

      $("." + $this[0].id + "").slideToggle('slow', function() { 
       $this.toggleClass('enabled'); 
      });    
     });