jQuery - 加载时隐藏 div，动画完成后显示

Question

我在一两个月前才开始编写代码，但遇到了一个我似乎无法找到解决方案的问题。

我有一个在单击按钮时打开的幻灯片，我遇到的问题是幻灯片本身的控件之一（“右控件”）在页面加载时可见。

我需要它在幻灯片打开时与“幻灯片”一起淡入，然后在您关闭幻灯片时隐藏。

任何帮助将不胜感激。

这是幻灯片的代码：

//幻灯片放映

$("#slideshow").css("overflow", "hidden");

manageControls(currentPosition);

$('.control').click(function () {

    currentPosition = ($(this).attr('id') == 'right-control') ? currentPosition + 1 : currentPosition - 1;

    manageControls(currentPosition);

    $('#slides').animate({
        'left': slideWidth * (-currentPosition)
    }, 600);
});

function manageControls(position) {

    if (position === 0) {
        $('#left-control').hide();
    } else {
        $('#left-control').show();
    }

    if (position == slidesNumber - 1) {
        $('#right-control').hide();
    } else {
        $('#right-control').show();
    }
}
//End Slideshow

这是我的 jsFiddle 完整代码：

http://jsfiddle.net/tVsjY/2/

Answer 1

我为给刚开始编码的人提供修复而不是解决方案感到有点羞耻，但也许这就是你想要的。将以下内容放在你的 jsfiddle 的第 50 行应该可以通过隐藏额外的可见跨度来解决你的问题：

$('.control').hide();

但我对此不太满意的原因是因为我没有学习并向您解释为什么会出现这个跨度。我可能会继续看它，但如果这就是你要找的全部内容，请告诉我。

---

更新的解决方案：找到问题/解决方案 您在 manageControls 函数中隐藏/显示的控件将始终隐藏一个并显示一个。

问题：两个控件一开始都是可见的。
您最初调用 manageControls(currentPosition);在第 38 行，currentPosition 的值为 0，所以左边的控件被隐藏，然后右边的控件被显示出来，从一开始就已经可见。

解决方法：替换manageControls(currentPosition);在第 38 行，内容如下：

$('.control').hide(); //Hides both controls

如果一切正常/有意义，请告诉我 :)

Answer 2

你的逻辑错误

function manageControls(position){}

您使用该功能有两个目的。

1. 根据您所在的幻灯片显示/隐藏左/右控件
2. 根据滑块是可见还是隐藏来显示/隐藏左/右控件。

但它总是像第一个场景一样工作。我的建议是简单地为您的函数添加另一个参数。

function manageControls(position, flag){}

在“显示”、“隐藏”和“检查”标志中发送一个值，用于显示两个控件，隐藏两个控件并显示与幻灯片编号相关的内容。然后根据情况重写你的函数调用。

将 css 中 .control 的显示属性设置为“无”。并在js中做如下改动。

$(document).ready(function () {

var out = 0;
var currentPosition = 0;
var slideWidth = 400;
var slides = $(".slide");
var slidesNumber = slides.length;

$("#button").click(function () {

    if (out === 0) {
        manageControls(currentPosition, 'show'); // Show controls on slide show
        $("#center, #slideshow, .slide").animate({
            width: "400px"
        }, {
            queue: false,
            duration: 1900
        });
        $(".slide").delay(2000).animate({
            opacity: "1"
        }, 1500);
        out = 1;
    } else {
        manageControls(currentPosition, 'hide'); // Hide controls on slide hide
        $("#center, #slideshow, .slide").animate({
            width: "0px"
        }, {
            queue: false,
            duration: 2000
        });
        $(".slide").stop(true).animate({
            opacity: "0"
        }, 250);
        out = 0;
    }
});

//Slideshow
$("#slideshow").css("overflow", "hidden");

// No need for this line if .control set to hidden in css.
//manageControls(currentPosition);

$('.control').click(function () {

    currentPosition = ($(this).attr('id') == 'right-control') ? currentPosition + 1 : currentPosition - 1;

    manageControls(currentPosition, 'check');  // Show/hide controls on control click

    $('#slides').animate({
        'left': slideWidth * (-currentPosition)
    }, 600);
});

function manageControls(position, flag) {
    // Checks for control display
    if (flag == 'check') {
        if (position === 0) {
            $('#left-control').hide();
        } else {
            $('#left-control').show();
        }

        if (position == slidesNumber - 1) {
            $('#right-control').hide();
        } else {
            $('#right-control').show();
        }
    } else if (flag == 'show') {
        $('.control').show();
    } else if (flag == 'hide') {
        $('.control').hide();
    }
}
//End Slideshow
});

但是您需要检查您的代码。您可能是初学者，但您应该始终致力于优化您的代码。而你的代码需要它。

Answer 3

找到了我需要做的解决方法。

由于 manageControls 函数根据#slides 的当前位置隐藏/显示左/右控件，因此在加载时隐藏 .control 所需要做的就是同时隐藏 #slides。

如果我将以下内容放在第 9 行：

$("#center, #slideshow, .slide").hide();

然后.show点击它 - 它有效！

最新更新：

添加了以下几行以使其美观（控件现在淡入视野）：

    $(".control").stop(true).delay(1800).animate({opacity: "0.5"}, 2000);

    $(".control").stop(true).animate({opacity: "0"}, 400);

这是我更新的 jsFiddle：

http://jsfiddle.net/tVsjY/18/

附：这还不漂亮，当幻灯片被激活时，这两个控件需要淡入淡出。下一步将继续工作，然后发布更新。