如何向附加添加淡入淡出？

发布于 2024-12-10 18:39:13 字数 818 浏览 0 评论 0原文

我无法适应我在 stackoverflow 中找到的描述如何向附加添加淡入淡出的示例，并且我无法弄清楚原因。

我有以下代码，用于使用 ajax 将联系表单替换为成功消息：

$.ajax({
         type: "POST",
         url: "contact-engine.php",
         data: dataString,
         success: function() {
           $('#contact-form').html("<div id='message-form'></div>");
           $('#message-form').html("<h3>Your message has been submitted successfully!</h3>")
           .hide()
           .fadeIn(2000, function() {
             $('#message-form').append('<p style="text-align:center">Thanks for getting in touch. I will get back to you as soon as possible.</p>');
           });
         }
       });
       return false;

我试图让追加淡入。我尝试在追加 html 之后添加 .hide().fadeIn(2000) ，但这并没有'不工作。有人可以帮我解决这个问题吗？

谢谢，

尼克

原文

I haven't been able to adapt the examples I have found in stackoverflow that describe how to add a fade to an append, and I can't work out why.

I have the following code for using ajax to replace a contact form with a success message:

$.ajax({
         type: "POST",
         url: "contact-engine.php",
         data: dataString,
         success: function() {
           $('#contact-form').html("<div id='message-form'></div>");
           $('#message-form').html("<h3>Your message has been submitted successfully!</h3>")
           .hide()
           .fadeIn(2000, function() {
             $('#message-form').append('<p style="text-align:center">Thanks for getting in touch. I will get back to you as soon as possible.</p>');
           });
         }
       });
       return false;

I am trying to get the append to fade in. I tried adding .hide().fadeIn(2000) after the append html, but this didn't work. Could someone help me out with this?

Thanks,

Nick

分享到QQ

分享到微博

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

发布评论

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

孤独难免 2024-12-17 18:39:13

如果您在 append 之后添加 hide 和 fadeIn，问题是您将隐藏和淡入容器，而不是您要添加的元素。如果将其更改为 appendTo 它应该可以工作：

$(NEW_ELEMENT).appendTo(SOMETHING).hide().fadeIn(2000)

示例：http://jsfiddle.net/ U4d9G/

If you add hide and fadeIn after append, the problem is that you will be hiding and fading the container, not the element you are adding. If you change it to appendTo it should work:

$(NEW_ELEMENT).appendTo(SOMETHING).hide().fadeIn(2000)

An example: http://jsfiddle.net/U4d9G/

回复收藏 0 原文

养猫人 2024-12-17 18:39:13

我更喜欢在附加之前隐藏......
像这样的事情：

$(NEW_ELEMENT).hide().appendTo(SOMETHING).fadeIn();

回复收藏 0 原文

一场春暖 2024-12-17 18:39:13

<script type="text/javascript">
$(document).ready(function(){
    $("<h3>Records has been successfully modified.</h3>").appendTo("#body").fadeIn(2000).fadeOut(4000);
    //$("#body").html("<div id='message-form'></div>");

});
</script>

<style type="text/css">
h3{
    text-align:center;
    width:30%;
    padding:15px 0;
    top:100px;
    position:absolute;
    color:snow;
    left:35%;
    background:darkred;

    /*
     darkgreen, snow
    darkred, snow

     */
}
</style>

<script type="text/javascript">
$(document).ready(function(){
    $("<h3>Records has been successfully modified.</h3>").appendTo("#body").fadeIn(2000).fadeOut(4000);
    //$("#body").html("<div id='message-form'></div>");

});
</script>

<style type="text/css">
h3{
    text-align:center;
    width:30%;
    padding:15px 0;
    top:100px;
    position:absolute;
    color:snow;
    left:35%;
    background:darkred;

    /*
     darkgreen, snow
    darkred, snow

     */
}
</style>

回复收藏 0 原文

~没有更多了~