Fading in a div

Fading in a div

Hey again,


I have a problem and I just cannot figure out what is wrong. I want to show news on a page and to fade them in. I am using jQuery AJAX to pull out the news from a MySQL database. Here is the code (I will explain what the exact problem is in the code):

showNews.php - the relevant part
  2. $row = mysql_fetch_assoc($result);

  4. while ($row = mysql_fetch_array($result)) {
  5. echo '<div class="news"><div class="t"><div class="b"><div class="l"><div class="r"><div class="bl"><div class="br"><div class="tl"><div class="tr">
  6. <h2>' . $row['Title'] . '</h2>' . $row['Time'] . '<p>' . $row['Manchet'] . '</p><br />
  8. <a class="noDecoration" href="#" >&raquo; Read more...</a><br /><br /></div></div></div></div></div></div></div></div></div><br />';
  9. }

The output is as intended.


news.js - imported on index.php where I want to show the news
  2. $(function() {
  3. function fadeInNews() {
  4. console.log("inside fadeInNews function"); // This is sucessfully displayed in the console
  5. //$('#mainContent div.news').hide().fadeIn(5000); // When not commented out, this does not work
  6.                 // The tests below all output 0, so apparently the problem is finding the divs, which I do not understand since they do appear on the page like <div class="news">text</div>
  7. console.log($('#mainContent div.news').length);
  8. console.log($('div.news').length);
  9. console.log($('.news').length);
  10. }
  12. function displayNews(startNumber) {
  13. $.ajax({
  14. url: 'php/showNews.php',
  15. type: 'POST',
  16. data: 'num=' + startNumber, // Don't mind this; it is for coding paging
  18. success: function(result) {
  19. console.log(result); // The result is tested to be correct (even though only 2 out of 3 news show - but I will deal with that later)
  20. $('#mainContent').html(result, fadeInNews()); // The news do in fact show, but they do not fade in
  21. }
  22. });
  23. }
  24. displayNews(0);
  25. });
index.php contains a <div id="mainContent"></div>.

So, to sum up, selecting the news classes in the fadeInNews function does not work for me. Can anyone see what I did wrong?

Thanks a lot.