JQuery fade working in IE and not Chrome

Question

I have looked through stack overflow and couldn't really find an answer. I have the following code that fades an item out, sends information to the server, and when it is received it fades it back in. It works great in IE. Doesn't work in chrome. The data is called on the server, but the actual fade effects aren't working.

function getChannelIndexFilter(channelName, filterType) {
  $("#videoList").fadeOut("fast", function() {
   $.get("/Home/GetChannelIndexFilter", 
    { channel: channelName, type: filterType },
    function(items, status) {
     $("#videoList").fadeIn("fast");
    },
   "json")
  });
 }

Now I am really confused... Even a simple

$(document).ready(function() {
    $(".videoImage").click(function() {
     $("#episodeList").fadeOut();
    });
});

Doesn't fade out. If I change fadeOut() to hide() it works.

Answer 1

Not sure if this will do it but it's worth a shot - try adding a semicolon after "json")

Answer 2

Is it possible that Chrome is running things too quickly to see what is going on. I'd try upping the fadeout period to 5 seconds and seeing what happens. Also consider just a fadeOut with no other code to see how Chrome behaves on this #videolist. I suspect that Chrome can't figure out what the #videolist is that is supposed to be faded, either that or it can't fade it.

I've used fadeIn/Out effects and they work fine on Chrome. You code appears perfect and you don't need any semi-colons whatsoever in this particular sample. Personally I don't use them where they aren't needed because minification programs can't remove them.

Lastly, I assume you are running the latest versions of jQuery and Chrome.

Answer 3

Before fading save html of the element that will be faded into JavaScript variable then do actual fading and after that just return original html from variable into the element that was faded. if that element contains some dom elements that will be manipulated in page load just call page load function at the end.

var sHtml = $(".divFade").html();
$(".divFade").fadeIn();
$(".divFade").html() = shtml;
PageLoad();