---
title: "Changing ajax to fade in and out"  
description: "Changing ajax to fade in and out"  
author: "Anonymous User"  
published: 2013-08-19  
updated: 2013-08-19  
canonical: https://www.mindstick.com/forum/1416/changing-ajax-to-fade-in-and-out  
category: "asp.net"  
tags: ["asp.net"]  
reading_time: 2 minutes  

---

# Changing ajax to fade in and out

Hi!

I am using [javascript](https://www.mindstick.com/articles/874/how-to-create-watermark-text-for-textbox-by-using-javascript) and ajax to load in my [content](https://www.mindstick.com/articles/13019/get-the-best-content-marketing-pricing-packages-for-your-brand) onto my div which is all working OK. But at the moment it's kind of [static](https://www.mindstick.com/articles/12098/the-static-keyword-the-static-methods) and a bit ugly.

I [am trying](https://answers.mindstick.com/qa/36834/which-two-programming-languages-should-i-master-in-if-i-am-trying-to-get-into-google-or-facebook) to get it to fade in and out so when a new tab is clicked the [previous](https://yourviews.mindstick.com/view/81421/unlock-2-0-is-just-like-previous-corona-lockdowns) one will fade out then the new one will fade in.

I have found the syntax to use is $([selector](https://www.mindstick.com/interview/23419/action-selector-in-mvc)).fadeIn(speed,[callback](https://www.mindstick.com/articles/152/using-the-callback)) but I can't figure out where to add this as [everywhere](https://yourviews.mindstick.com/view/80697/bjp-losing-ally-everywhere) I have read says add it after your click [function](https://www.mindstick.com/articles/13001/multi-statement-table-valued-user-defined-function-in-sql-server) but my code doesn't have that.

```
    var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)    var loadedobjects=""    var rootdomain="http://"+window.location.hostname    var bustcacheparameter=""     function ajaxpage(url, containerid){    var page_request = false    document.getElementById(containerid).style.display = 'none';    if (window.XMLHttpRequest) // if Mozilla, Safari etc    page_request = new XMLHttpRequest()    else if (window.ActiveXObject){ // if IE    try {    page_request = new ActiveXObject("Msxml2.XMLHTTP")    }    catch (e){    try{    page_request = new ActiveXObject("Microsoft.XMLHTTP")    }    catch (e){}    }    }    else    return false    page_request.onreadystatechange=function(){    loadpage(page_request, containerid)    }    if (bustcachevar) //if bust caching of external page    bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()    page_request.open('GET', url+bustcacheparameter, true)    page_request.send(null)    }    function loadpage(page_request, containerid){        if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)) {            document.getElementById(containerid).innerHTML=page_request.responseText;            document.getElementById(containerid).style.display = 'block';        }    }     function loadobjs(){    if (!document.getElementById)    return    for (i=0; i<arguments.length; i++){    var file=arguments[i]    var fileref=""    if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding    if (file.indexOf(".js")!=-1){ //If object is a js file    fileref=document.createElement('script')    fileref.setAttribute("type","text/javascript");    fileref.setAttribute("src", file);    }    else if (file.indexOf(".css")!=-1){ //If object is a css file    fileref=document.createElement("link")    fileref.setAttribute("rel", "stylesheet");    fileref.setAttribute("type", "text/css");    fileref.setAttribute("href", file);    }    }    if (fileref!=""){    document.getElementsByTagName("head").item(0).appendChild(fileref)    loadedobjects+=file+" " //Remember this object as being already added to page    }    }    }
```

thanks in [advance](https://www.mindstick.com/blog/33258/jee-mains-and-jee-advance-exams)!

## Replies

### Reply by shreesh chandra shukla

Hi!

I would use JQuery to simply your AJAX code. It also has native functionality for doing fade in and out.

## Here's an example

```
function ajaxpage(url, containerid){   $.get(url,function(response) {      $('#'+containerid).fadeOut('slow',function() {         
$('#'+containerid).html($.trim(response));        
$('#'+containerid).fadeIn('slow');       });   });}
```


---

Original Source: https://www.mindstick.com/forum/1416/changing-ajax-to-fade-in-and-out

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.