jquery中的反向延遲

Question

這是我第一次用jQuery從頭開始編碼，這與幾周前相比有了巨大的改進。如果答案完全明顯，我表示歉意;我確實搜索得很徹底，但是我找不到我需要的東西，或者我沒有把它說出來。

在這個描述欄中，我想要發生的是小文本向上滑動，然後是大文本向下滑動，這是我通過添加延遲而被強制導致的。當你再次點擊按鈕時，我想要發生相反的反應 - 讓大文本向上滑動，然後小文本向下滑動。然而，發生的情況是，在大文本消失之前，小文本再次出現 - 考慮到我添加的延遲，這是有道理的，但這不是我想要發生的事情。

有什麼我可以改變的相反的反應發生每次描述被切換，或者我有點卡住強迫選項？

這裏是我的腳本：

$(document).ready(function(){ 
    $(".followme").click(function(){ 
    $(".astrology").delay(1000).slideToggle(1000); 
    $(".desc").slideToggle(1000); 
    $(this).text($(this).text() == '- less' ? "+ more" : "- less"); 
    }); 
}); 

而且不斷有幫助jsfiddle。

感謝您花時間閱讀，我非常感謝！

Answer 1

爲什麼不使用if聲明？

$(document).ready(function(){ 
 
    $(".followme").click(function(){ 
 
    if ($(".astrology").is(':visible')) 
 
    { 
 
     $(".astrology").delay(1000).slideToggle(1000); 
 
     $(".desc").slideToggle(1000); 
 
     $(this).text("+ more"); 
 
    } else { 
 
     $(".astrology").delay(1000).slideToggle(1000); 
 
     $(".desc").slideToggle(1000); 
 
     $(this).text("- less"); 
 
    } 
 
    }); 
 
});

.zodiac { 
 
     width:100px; 
 
     border-radius:6px; 
 
     color:#101010; 
 
     font-family:calibri; 
 
     font-size:10px; 
 
     font-weight:100; 
 
     position:absolute; 
 
     line-height:7px; 
 
     top:135px; 
 
     left:110px; 
 
     border-bottom:3px double white; 
 
     padding:3px; 
 
     text-align:justify; 
 
     margin:auto auto; 
 
    } 
 
    
 
    .signs { 
 
     
 
     width:100px; 
 
     color:#101010; 
 
     padding:3px; 
 
     font-family:calibri; 
 
     font-size:10px; 
 
     font-weight:100; 
 
     position:relative; 
 
     top:25px; 
 
     left:0px; 
 
     margin-top:-12px; 
 
     text-align:center; 
 
     text-shadow:0 0 3px #a9dcf1, 0 0 5px #a9dcf1; 
 
     display:block; 
 
    } 
 
    
 
    .signs a{ 
 
     color:#101010; 
 
     text-decoration:none; 
 
     -webkit-transition: all .3s ease-in-out; 
 
    -moz-transition: all .3s ease-in-out; 
 
    -ms-transition: all .3s ease-in-out; 
 
    -o-transition: all .3s ease-in-out; 
 
    transition: all .3s ease-in-out; 
 
     
 
    } 
 
    
 
    .signs a:hover { 
 
     color:#101010; 
 
     text-shadow:0 0 3px #a9dcf1, 0 0 20px #a9dcf1, 0 0 25px #a9dcf1, 0 0 20px #a9dcf1; 
 
     -webkit-transition: all .3s ease-in-out; 
 
    -moz-transition: all .3s ease-in-out; 
 
    -ms-transition: all .3s ease-in-out; 
 
    -o-transition: all .3s ease-in-out; 
 
    transition: all .3s ease-in-out; 
 
    } 
 
    
 
    .followme { 
 
     color:#101010; 
 
     position:relative; 
 
     text-align:center; 
 
     text-shadow:0 0 3px #fff; 
 
     padding:3px; 
 
    } 
 
    
 
    .astrology {width:100px; 
 
     color:#101010; 
 
     font-family:calibri; 
 
     font-size:9px; 
 
     font-weight:100; 
 
     position:relative; 
 
     line-height:10px; 
 
     padding:3px; 
 
     text-align:justify; 
 
     margin:auto auto; 
 
     display:none; 
 
     
 
    } 
 
    
 
    .um { 
 
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="zodiac"> 
 
      TITLE<br/> 
 
      <div class="desc"> 
 
      <small><small><small>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pretium ut erat quis lacinia. Mauris tristique purus sit amet eros porta fermentum.</small></small></small></div> 
 
      <div class="followme">+ more</div> 
 
      <div class="astrology">Nunc sagittis posuere velit. Duis gravida, dolor non luctus convallis, nunc orci laoreet orci, nec porta risus ante quis libero. Maecenas fermentum porttitor nibh, quis aliquet odio imperdiet eu. Vivamus tempor, felis vel cursus bibendum, ligula nulla dignissim velit, et rhoncus sapien nunc et velit. Duis eget lacus porta, sollicitudin elit vitae, aliquam dui.</div> 
 
      <div class="signs"><a>refresh</a> | <a>ask</a> | <a>archive</a></div> 
 
       </div>

Answer 2

這裏的另一種選擇：附加不同的處理器的多與少的選項。 http://jsfiddle.net/c499rc7h/

$（文件）。就緒（函數（）{

$("#more").click(function(){ 
    $(".desc").slideUp(1000, function(){ 
     $(".astrology").slideDown(1000); 
     $(".followme").toggle(); 
    }); 
}); 

$("#less").click(function(){ 
    $(".astrology").slideUp(1000, function(){ 
     $(".desc").slideDown(1000); 
     $(".followme").toggle(); 
    }); 
}); 

}）;