Even when I placed the animations in the same document.ready functions, I got something similar to the above. How can I fix this?
Ps: I just uploaded the page which is still under construction to the following url http://mygeneric.info/green/index.html so you can actually visualize what's going on.
Code: Select all
<script type = "text/javascript">
$(document).ready(function() {
//First image in non js compliant browsers is by default displayed. Hide it for compliant browsers
$("#green_car").hide;
//Do same for the first slogan(smart business). Smaart business is positioned to be displayed for non js browsers.
$(".slogans").hide();$("#smart_business").css("left","245px");
(function($) {
//The fade in out function.
$.fn.fader = function() {
var elements = this;
l = elements.length;
i = 0;
function execute() {
var current = $(elements[i]);
i = (i + 1) % l;
current
.fadeIn(1000)
.delay(8000)
.fadeOut(1000,execute);
}
execute();
//Run the function.
return this;
//Making this available again to the outer function.
};
})(jQuery);
$(".g_img").fader();
});
</script>
<script type = "text/javascript">
$(document).ready(function() {
//Do same for the first slogan(smart business). Smaart business is positioned to be displayed for non js browsers.
$(".slogans").hide();$("#smart_business").css("left","245px");
(function($) {
//The slide in out function.
$.fn.slider = function() {
var elements1 = this;
l = elements1.length;
i = 0;
function execute1() {
var current1 = $(elements1[i]);
i = (i + 1) % l;
current1.fadeIn(100).animate({'marginLeft' : '-=240px'},500)
.delay(8000)
.animate({'marginLeft' : '+=240px'},500)
.fadeOut(100,execute1);
}
execute1();
//Run the function.
return this;
//Making this available again to the outer function
};
})(jQuery);
$(".slogans").slider();
});
</script>