I have a simple but baffling JQuery problem that tells me I have an inadequate understanding of JQuery.
The objective is to have a sequential, rotating banner in the header of the webpage. The objective is to have each banner take 4 secs to fade in, four secs to fade out and them move on to the next entry in the list.
Hereare the HTML, CSS and the code snippet.
<div id="headerbar1">
<table>
<tr>
<td width="40%">Some text </td>
<td width="10%"> </td>
<td width="50%" valign="middle" align="right">
<p id="rotation"> </p>
</td>
</tr>
</table>
</div>
#headerbar1 {
font: Arial Black;
font-family: "Arial Black", Gadget, sans-serif;
font: Arial Black;
font-size: 24px;
color: #FFF;
background-color: #345595;
background-image: url(../img/header2.png);
height: 130px;
padding-left: 20px;
}
#rotation {
font: Arial Black;
font-family: "Arial Black", Gadget, sans-serif;
font: Arial Black;
font-size: 16px;
color: #6FC;
padding-right: 50px;
}
Javascript code:
jQuery(function ($) {
$(document).ready(function(){
var bannerlist = [
'Banner1',
'Banner2',
'Banner3',
'Banner4',
'Banner5',
'Banner6',
];
i = 0;
j = bannerlist.length - 1;
k = 0;
while (k < 2) {
if (i > j) {
i=0;
k += 1;
}
$banner = $('#rotation');
$banner.fadeOut(4000);
$banner.text(bannerlist[i++])
$banner.fadeIn(4000);
}
});
});
- <div id="headerbar1">
- <table>
- <tr>
- <td width="40%">Some text </td>
- <td width="10%"> </td>
- <td width="50%" valign="middle" align="right">
- <p id="rotation"> </p>
- </td>
- </tr>
- </table>
- </div>
- #headerbar1 {
- font: Arial Black;
- font-family: "Arial Black", Gadget, sans-serif;
- font: Arial Black;
- font-size: 24px;
- color: #FFF;
- background-color: #345595;
- background-image: url(../img/header2.png);
- height: 130px;
- padding-left: 20px;
- }
- #rotation {
- font: Arial Black;
- font-family: "Arial Black", Gadget, sans-serif;
- font: Arial Black;
- font-size: 16px;
- color: #6FC;
- padding-right: 50px;
- }
- Javascript code:
- jQuery(function ($) {
- $(document).ready(function(){
- var bannerlist = [
- 'Banner1',
- 'Banner2',
- 'Banner3',
- 'Banner4',
- 'Banner5',
- 'Banner6',
- ];
- i = 0;
- j = bannerlist.length - 1;
- k = 0;
- while (k < 2) {
- if (i > j) {
- i=0;
- k += 1;
- }
- $banner = $('#rotation');
- $banner.fadeOut(4000);
- $banner.text(bannerlist[i++])
- $banner.fadeIn(4000);
- }
- });
- });
What happens is that the program iterates through the list and displays each entry in sequence without applying the 4 sec fade in and fade out animation. After it exits the routine, it then performs the 4 sec fade in / fade out sequence continuously but on the first list element only(?!!)
Browser: Firefox 3/5/7 with Firebug turned on.
While I know that I can do this easily with plain old Javascript. I am trying to understand the nuances of how JQuery works so I prefer using the JQuery functions to make this work.
Side note: I have successfully used JQuery to build and load two overlays with FadeIn/FadeOut animation, so it is not the JQuery code.
I have tried multiple methods to get the FadeIn/FadeOut animation to behave correctly with no luck. What this tells me is that I am missing something basic in my understanding of JQuery.
Thanks in advance for your help.
February 9th, 2010, 9:02 am
