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

你有一个逻辑错误

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 2

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

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

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

---

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

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

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

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

让我知道一切是否有效/有意义:)

Answer 3

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

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

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

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

然后在点击时显示它 - 它有效！

最近更新：

添加了以下几行以使其在美学上吸引眼球（控件现在淡入视野）：

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

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

这是我更新的 jsFiddle：

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

Ps 还不是很漂亮，这两个控件需要在幻灯片激活时淡入淡出。将在下一步工作，然后发布更新。