jquery fadein effect not working onclick

I am having issues getting a fadeIn to work with my jquery. Was hoping someone could help. Basically, I have a button that I click on my page that will essentially pull in the next set of results (code below). I'd like to add the fadein effect when the results are returned to the screen, however I am doing something wrong. Below are examples I tried, but are not working.

example 1

var number = 0;
$(function(){
  $('#showMore').click(function(event) {
     event.preventDefault();
    number++;

    $.ajax({
       type: "POST",
       url: "/getnext.php",
       data: {"count":number},

       success: function(results){
        $('#results').html(results);
        $('#results').fadeIn()


       }
     });

  });

});

example 2

var number = 0;
$(function(){
  $('#showMore').click(function(event) {
     event.preventDefault();
    number++;

    $.ajax({
       type: "POST",
       url: "/getnext.php",
       data: {"count":number},

       success: function(results){
        $('#results').fadeIn().html(results);


       }
     });

  });

});

Any thoughts on why this is not working?

Answers


Make sure there is an response first :

$('#results').html(results).hide().fadeIn();

A. Wolff is correct that the element must be hidden in order to use .fidein() on it. The first example is also missing the ";" semicolon at the end of the .fadein function.


Need Your Help

Alternative UI control for large data lists instead of DropDownList

asp.net user-interface webforms asp.net-2.0 ajaxcontroltoolkit

I am using C# and ASP.NET with version 2.0 of the .NET Framework library on this particular project. We are also using the AjaxControlToolkit. The AjaxControlToolkit should have the controls avai...

Flatten and De-flatten for Solr input/output

java parsing solr

I have lots of Java objects which have parent child relationships.