элемент перемещается влево на скрыть

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 в

посещайте скрипку обновление: http://jsfiddle.net/dLt51xwe/2/

fadeOut() и hide() не работал на <errormessage> элемент, который вы создали, так что вместо этого я редактировал javascript для вызова fadeOut() на внутреннем div .error-message, а не <errormessage> c элемент конвейера.

Смотрите здесь:

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

Answer 2

Просто используйте функцию JQuery fadeOut() будет решить эту проблему:

Изменения

$('#error').hide("slow"); 

в

$('#error').fadeOut("slow");