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声明？

＆＃13;

$(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");
    }
  });
});

＆＃13;

  .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 {
        }

＆＃13;

<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>

＆＃13;

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();
    });
});

}）;

jquery中的反向延迟

2 个答案: