6

我正在尝试这样做，以便当您单击链接时，它会删除一个 div（带有一些段落和文本）并插入另一个 div（带有一些段落和一些文本）。我正在使用 jQuery 来淡入淡出。当您单击链接时，原始 div 的淡出会起作用，然后我有一个开关盒来确定淡入的内容。但是，设置为“慢”的淡入淡出似乎立即发生。

这是相关的代码（其余只是其他情况）：

$(document).ready(function() {
$('.nav-link').click(function() {
    var linkClicked = $(this).attr("id");
    $('.content').fadeOut('fast');

    switch(linkClicked) {

        case 'home': 
            console.log("linkClicked = "+linkClicked);
            $('#home-content').fadeIn('slow', function() {
                $(this).css("display", "inline");
                $(this).css("opacity", 100);
                });
            break;

编辑：

因此，将fadeTo 更改为fadeOut，并将fadeOut 中的“慢”更改为“快”后，它运行良好并按照我想要的方式进行转换。但是，现在每当我单击“主页”时，它都会将 div 移动到“块”位置（它会将其吐到左下角），然后再将其自身推回容器中心的正确位置。只有当我单击主页并且没有其他 sidenav 链接时，它才会这样做……它们都在运行完全相同的代码（主页只是 switch 案例中的第一个）。有任何想法吗？

4

4 回答 4

1

如果您希望在完成fadeIn后启动fadeTo，您将需要使用回调函数。此外，由于您的不透明度为 0，因此只需使用fadeOut：

$(document).ready(function() {
$('.nav-link').click(function() {
    var linkClicked = $(this).attr("id");
    $('.content').fadeOut('slow', function() {

    // this code will begin once fadeTo has finished
    switch(linkClicked) {
        case 'home': 
            console.log("linkClicked = "+linkClicked);
            $('#home-content').fadeIn('slow', function() {
                $(this).css("display", "inline");
                $(this).css("opacity", 100);
                });
            break;
    });
});
于 2013-06-03T02:34:30.293 回答
0

您只需要向fadeOut 添加一个回调，以便在动画完成后执行它：

$(document).ready(function() {
$('.nav-link').click(function() {
    var linkClicked = $(this).attr("id");
    $('.content').fadeOut('slow', function() {

    switch(linkClicked) {

        case 'home': 
            console.log("linkClicked = "+linkClicked);
            $('#home-content').fadeIn('slow', function() {
                $(this).css("display", "inline");
                $(this).css("opacity", 100);
                });
            break;

    });
于 2013-06-03T02:54:34.927 回答
0

在没有看到您的 HTML 的情况下，很难理解您想要达到的确切结果，但这里有一个 JSfiddle，上面有您的代码。

http://jsfiddle.net/W9d6t/

$('.nav-link').click(function() {
    var linkClicked = $(this).attr("id");
    //$('.content').fadeTo('slow', 0);

    switch(linkClicked) {

        case 'home': 
            console.log("linkClicked = "+linkClicked);
            $('#home-content').fadeIn('slow', function() {
                $(this).css("display", "block");
                alert('All done!');
            });
    }
});
于 2013-06-03T02:06:37.893 回答
0

根据我对您正在尝试做的事情的理解，我相信您只需要这样做：

$('#home-content').fadeIn('slow');

（该fadeIn函数自动将display属性设置为内联/块）

此外，虽然您的实现正确，但执行起来更简单：

$('.content').fadeOut('slow');

（简化的jsFiddle）

于 2013-06-03T02:01:00.553 回答