jquery - 后期动画链接切换

Question

我有一个动画设置为在单击 DOWN 链接时向下滑动 DIV。我想在动画结束时将下行链接替换为 UP 链接，以便可以返回 DIV。设置了将 DIV 动画返回到其起始位置的 JQuery。我唯一遇到的困难是在向下和向上 DIV 之间切换。

这是代码http://jsfiddle.net/pC6fC/20/

Answer 1

您可以指定动画完成后要运行的回调，如下所示：

var toggleButton = function () {
    $(".link, .link1").toggle();
};

/* Slides down alert banner */
$(function(){ 
    $(".link").click(function(){
        $(".box1").animate({'margin-top':150}, 500, toggleButton);
    });
});

/* Slides up alert banner */
$(function(){
    $(".link1").click(function(){
        $(".box1").animate({'margin-top':0}, 500, toggleButton);
    });
});

我也改成visibility: hidden在display: none你的 CSS 上。

见小提琴。

Answer 2

这是小提琴：http: //jsfiddle.net/ttu9t/

<div class="link">DOWN</div>
<div class="box1"></div>
<div class="box2"></div>​

js：

$(function(){ 
     $(document).on('click', '.link', function(){
        $('.box1').animate({'margin-top':150}, 500);
        $(this).text('UP');
        $(this).removeClass('link');
        $(this).addClass('link1');
    });
    $(document).on('click', '.link1', function(){
        $('.box1').animate({'margin-top':0}, 500);
        $(this).text('DOWN');
        $(this).removeClass('link1');
        $(this).addClass('link');
    });
});

​并且不要忘记让 link1 可见：

.link1 {
}

---

更新

http://jsfiddle.net/ttu9t/2/

Answer 3

也许您可以尝试使用函数 toggle() 来执行此操作。

它用于隐藏或显示 div。

 <script type="text/javascript">
   function togglefield(classname) {
      $("." + classname).toggle("slow")
 </script>



 <button onclick="togglefield('test')"> test </button>

 <div class="info"><br/><br/><br/></div>

这当然可能会有所改善，但这就是我对您的需求的看法。