CODEWITHSUNDEEP
jqueryclickloadhideshow
F. Certainly.
F. Certainly.

Reputation: 179

Jquery hide current div content, then load new content, then show new content

Possible to hide current div content, then load new content, then show new content on jquery click?

here's the page:

<div id="menu">
<ol>
<li><a id="anchor1" href="#content_jump_point">Blah Blah Blah</a></li>
</ol>
</div>

<div id="content">
</div>

The css is standard and not relevant to the question, but here is some anyway:

#menu{
float:left;
clear:both;
margin-left: auto;
margin-right:auto;
width: 100%
height:auto;
}

#content{
float:left;
clear:both;
margin-left: auto;
margin-right:auto;
width: 100%
height:auto;
}

The html loaded to the div when the page first loads

first_stuff.html

<h1> Stuff that gets loaded when the page loads</h1>
<p> lorem*20 </p>

The html that loads after the anchor1 is clicked: second_stuff.html

<h1> Stuff that slides in after the stuff above slides out</h1>
<p> lorem*10 </p>

Here's the javascript:

<script type="text/javascript" src="../javascripts/jquery-1.12.0.min.js">
</script>
<script type="text/javascript" src="../javascripts/jquery-ui.min.js">
</script>

The init function is also loaded with src but here it is:

<script type="text/javascript">

$(init);

function init(){

$('#content').load('/content/first_stuff.html');    

$("#anchor1").click(function(){

$('#content').hide("slide",{direction:"right"},1000);

$('#content').load('/content/second_stuff.html').show("slide",
{direction:"left"},1000);

});//end click function

};//end init

</script>

The problem is that within the click function the html is loaded to the content div before the content is hidden. So rather than 'first_stuff.html' sliding out to the right and 'second_stuff.html' sliding in from the left, 'second_stuff.html' loads instantly then slides out to the right and slides in again from the left.

We want 'first_stuff.html' to slide out to the right, then 'second_stuff.html' to slide in from the left, on the same click of the anchor.

We've tried a number of things and searched the web thoroughly. Greatly appreciate any wizzdom.

For example, we tried putting '.show()' in a callback function for the '.load()' method, or loading the HTML from the content div to a variable before the click function is called, then hiding that variable and loading stuff to content div.

Upvotes: 1

Views: 562

Answers (2)

F. Certainly.
F. Certainly.

Reputation: 179

This works:
$('#content').hide("slide",{direction:"right"},1000,function(){$('#content').loa‌​‌​d('second_stuff.html')});
$('#content').show("slide",{direction:"left"},1000);

Upvotes: 1

Bhushan Narkhede
Bhushan Narkhede

Reputation: 111

you can use like this:

$('#content').show("slide",{direction:"left"},1000,function(){$('#content').load('second_stuff.html')});

first hide div then show div after that load contents in it.

Upvotes: 0

Related Questions