元素向左移動隱藏

我在屏幕中間顯示一條錯誤消息，幾秒鐘後它會淡出。元素向左移動隱藏

這可行，但我不想要發生的是當淡出時移動到屏幕最左側的錯誤消息。

我不確定這是因爲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/

任何幫助是極大的讚賞，謝謝！

來源

2015-05-05 ItsMatt

你撥弄不包含else語句。 – apaul

使用.fadeOut("slow")而不是.hide("slow")問題是使用hide()上的默認緩動。我總是發現很難找到可用於緩動選項的字符串 - 因此使用fadeIn()和更簡單。

$(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/

和hide()不工作，你創建的<errormessage>元素，所以不是我編輯的javascript在內部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); 
});

來源

2015-05-05 00:41:52

這是有效的，但我忘記提及的一件事是我沒有將這件事與事件一起使用，並且fadeOut立即隱藏起來。我的錯誤消息正在else語句中運行。 http://jsfiddle.net/dLt51xwe/1/ – ItsMatt

我會研究這一點，不知道爲什麼它不起作用，當使用這種方式... –

查看更新ItsMatt :-) –

只需使用jQuery函數將解決這個問題：

變化

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

到

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

來源

2015-05-05 00:43:03

元素向左移動隱藏

回答

相關問題