jquery fadeIn not working
Unless the element is hidden, no fade will occur, you need something like this:
$(".warning").hide().fadeIn(4000);
You can give it a try here, also $()
is deprecated in 1.4+, you should use $(document)
or the shorter version, like this:
$(function() {
$(".warning").hide().fadeIn(4000);
});
The alternative is to give the element a display: none
initially but this breaks for JS-disabled users, or if JavaScript errors occur preventing the fade, so you may want to steer clear of this approach.
add display:none
to your css code.
.warning{border: 1px solid #F0AAAA; background:#FFBABA; color: #C90000;display:none}
I would tend to think you want some event to be managed for the fadin. see working example here: http://jsfiddle.net/hPHPn/
Thus:
$(document).ready(function(){
$(".warning").hide();// hide it initially
$('#unhideit').click(function(){
$(".warning").fadeIn(4000); });
});
for some simple markup:
<p class="warning">A successful authorization already exists
for this Quote ID. Further authorizations are not allowed at this time.</p>
<input type="button" id="unhideit" value="clickme" />
I have recently done the same thing in my application. At the top of my html
document I have:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="advtemp3jquery.js"></script>
The part which says src="advtemp3jquery.js
refers to my external .js
file. I find it neater to keep the code in an external file.
The script does the following:
$(document).ready(function() {
$('.header1,.header2').fadeIn('4000');
});