javascript - JqueryUI (Ajax) Hide() 有效，Show() 无效

Question

我对 JQuery/Ajax 很陌生，而且我已经很长时间没有做过任何 HTML 了，所以如果这是一个愚蠢的问题，请原谅我。我读了相当多的书，但我却不知所措。

简而言之，在完成 FlipClock.js 倒计时器后，时钟应该从页面向右滑动，这是可行的。但是，在启动计时器时，我希望 div 从右侧滑到页面上，但我无法让 div 移动。这是我的代码:

function showTimer() {
$(".clock").show("slide", {direction: "left"}, 2000); //Does nothing, seemingly
timerRunning= true;
var clock = $('.clock').FlipClock(3, {
    countdown: true,
    clockFace: 'MinuteCounter',
    callbacks: {
        stop: function() {
            timerStopped();
        }
    }

});
}

function timerStopped() {
        console.log("Test function on clock stop!");
        $('.clock').hide('slide',{direction:'right'},1000);

        }

我还没有为 clock div 设置任何 CSS，所以我不确定是否需要首先将其放置在屏幕之外，但是 hide 有效，所以我是有点困惑。

任何意见或建议将不胜感激。

谢谢

Answer 1

经过长时间的调试，我找到了解决方案。请在 jsfiddle 中尝试一下:https://jsfiddle.net/mLkfyrd8/1/

可能出错的事情:

1. 忘记换行 $(document).ready()
2. 忘记包含 jQuery/jQuery UI 库
3. 忘记调用 $(".clock").hide()

更新:时钟向上/向下移动似乎存在问题。请参阅this new fiddle对于固定版本(添加填充。)

演示:

$(document).ready(function() {

    $(".container").hide();

    function showTimer() {

        $('.clock').FlipClock(3, {
            countdown: true,
            clockFace: 'MinuteCounter',
            callbacks: {
                stop: function() {
                    timerStopped();
                }
            }

        });

        $(".container").show("slide", {direction: "left"}, 2000);

    }


    function timerStopped() {
        console.log("Test function on clock stop!");
        $('.container').hide('slide',{direction:'right'},1000);
    }

    showTimer();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/objectivehtml/FlipClock/master/compiled/flipclock.css">
<script src="https://cdn.rawgit.com/objectivehtml/FlipClock/master/compiled/flipclock.min.js"></script>

<div class="container" style="padding: 20px;"><div class="clock"></div></div>