Question

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

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

我还在您的CSS上将visibility: hidden更改为display: none。

请参阅Fiddle。

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>

这肯定会有所改善，但这就是我对你的需求的考虑。

发布动画链接开关

3 个答案: