jQuery 淡出 =>替换为=>淡入

发布于 2024-12-04 11:40:23 字数 1164 浏览 0 评论 0原文

我在使用 ReplaceWith fadeIn 和 fadeOut 函数时遇到了一个小问题：

$('#form').fadeOut(300, function() {
    var message = 'some message';
    $(this).replaceWith($(message).fadeIn(300, function() {
        var t = $(this);
        setTimeout(function() {
            t.fadeOut(300, function() {
                location.reload();
            });
        }, 4000);
    }));
});

表单淡出，但没有其他任何反应 - 它删除了表单，但没有任何内容替换它。

知道这里可能出了什么问题吗？

它实际上是对象文字的一部分 - 如下所示：

var formObject = {
submitFadeOutReload : function(url, arr) {      
    jQuery.post(url, arr, function(data) {
        formObject.submitReplaceReload(data.message);
    }, 'json');
},
submitReplaceReload : function(message) {
    if (message !== '') { 
        formObject.objForm.fadeOut(300, function() {
            $(this).replaceWith($(message).fadeIn(300, function() {
                var t = $(this);
                setTimeout(function() {
                    t.fadeOut(300, function() {
                        $(this).replaceWith($(clone).fadeIn(300));
                    });
                }, 2000);
            }));
        });
    }
}
};

原文

I'm having a small problem with replaceWith fadeIn and fadeOut functions:

$('#form').fadeOut(300, function() {
    var message = 'some message';
    $(this).replaceWith($(message).fadeIn(300, function() {
        var t = $(this);
        setTimeout(function() {
            t.fadeOut(300, function() {
                location.reload();
            });
        }, 4000);
    }));
});

The form fades out but nothing else happens - it removes the form but replaces it with nothing.

Any idea what might be going wrong here?

It's actually the part of the object literal - which goes like this:

var formObject = {
submitFadeOutReload : function(url, arr) {      
    jQuery.post(url, arr, function(data) {
        formObject.submitReplaceReload(data.message);
    }, 'json');
},
submitReplaceReload : function(message) {
    if (message !== '') { 
        formObject.objForm.fadeOut(300, function() {
            $(this).replaceWith($(message).fadeIn(300, function() {
                var t = $(this);
                setTimeout(function() {
                    t.fadeOut(300, function() {
                        $(this).replaceWith($(clone).fadeIn(300));
                    });
                }, 2000);
            }));
        });
    }
}
};

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

你げ笑在眉眼 2024-12-11 11:40:23

不确定您正在尝试做的所有事情，但这希望能让您走上正确的道路。脚本中的一个关键问题是 $("new message")。动态添加时需要创建 HTML，例如 $("

Something

")。

<div id="foo">my div</div>

$(document).ready(function() {
    $('#foo').fadeOut(300, function() {
        var $newElement = $('<div id="new div">new message</div>');
        $(this).replaceWith($newElement);
        $newElement.fadeIn(300, function() {
            document.location.reload();
        });
    });
});

在 JSFiddle 这里。

No sure of everything you're trying to do but this will hopefully set you off on the right lines. A key issue in your script was $("new message"). You need to create HTML when you are adding dynamically, such as $("<p>Something</p>").

<div id="foo">my div</div>

$(document).ready(function() {
    $('#foo').fadeOut(300, function() {
        var $newElement = $('<div id="new div">new message</div>');
        $(this).replaceWith($newElement);
        $newElement.fadeIn(300, function() {
            document.location.reload();
        });
    });
});

On JSFiddle here.

回复收藏 0 原文