jquery - 元素在隐藏时向左移动

Question

我在屏幕中间显示一条错误消息，几秒钟后它就会淡出。

这可行，但我不希望发生的是淡出时错误消息移动到屏幕的最左侧。

我不确定这是否是由于 css 或实际的 jquery 本身引起的。

以下是所发生情况的示例:http://jsfiddle.net/dLt51xwe/

$(document).ready(function () {
    $("button").click(function () {
        $('#error').html("<div class='error-message'>ERROR</div>").show();
        setTimeout(function () {
            $('#error').hide("slow");
        }, 1000);
    });
});

我想知道是否是 css 上的边距造成的，所以我尝试了这个:

left: 50%;
transform: translate(-50%, 0);
width: 40%;
position: relative;

但是我仍然遇到同样的问题，元素在淡出时会移动到最左侧。

我也尝试过使用提供的 fadeOut() 选项，但淡入淡出不起作用。 fadeOut() 似乎只在我的事件中起作用，并且我在 else 语句中使用它。

事件示例:http://jsfiddle.net/dLt51xwe/1/

非常感谢任何帮助， 谢谢!

Answer 1

使用.fadeOut("slow")而不是.hide("slow")问题与 hide() 上的默认缓动有关。我总是发现很难找到可用于缓动选项的可用字符串 - 因此使用起来更简单 fadeIn()和fadeOut() .

$(document).ready(function () {
    $("button").click(function () {
        $('#error').html("<div class='error-message'>ERROR</div>").show();
        setTimeout(function () {
            $('#error').fadeOut("slow");
        }, 1000);
    });
});

---

回应ItsMatt的评论

查看您的 fiddle 更新:http://jsfiddle.net/dLt51xwe/2/

fadeOut()和hide()没有在 <errormessage> 上工作您创建的元素，因此我编辑了 javascript 来调用 fadeOut()在内部 div .error-message而不是 <errormessage>容器元素。

看这里:

$(document).ready(function () {
  $('errormessage').html("<div class='error-message'>Please enter a valid message!</div>").show();
  setTimeout(function () {
      $('.error-message').fadeOut("slow");
  }, 1000);
});