CODEWITHSUNDEEP
jquery
mikepreble
mikepreble

Reputation: 269

new to jquery: need help putting fade in/out script together

My in initial problem: I have a table with basic information about clients on the top half of the the screen. I want to put a div on the bottom half of the screen that will show detailed information about the client when the name is clicked on on the table in the top half.

I found a bunch of great examples on the jquery end of the problem right here in stackoverflow

Here: Fade out a div with content A, and Fade In the same div with content B
And Here: How to fade out div slowly, update content, and then fade in div slowly, using jQuery?

But my problem is how to get it to work for me and I know it's just because I don't understand how jquery works.

Here's something close to what my site looks like now:

<table>
<tr>
<td>ID</td>
<td>Name</td>
<td>Account Number</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">Joe Smith</a></td>
<td>3838.3234</td>
</tr>
<tr>
<td>2</td>
<td><a href="#">Jane Doe</a></td>
<td>915.70</td>
</tr>
...
</table>
<div id="client_details>
this is where I want the client details to go that will have more information than the table up above
</div>

It seems like a really easy thing to do. I just don't know how to setup the client details information and the links so it fades in the current (clicked) client's info and fades out the previous one.

Upvotes: 0

Views: 111

Answers (3)

Kon
Kon

Reputation: 27451

Have you tried any jQuery at all?

The basics of what you want to do would look something like this: 

$('#elementId').fadeOut().html('[NEW MARKUP]').fadeIn();

Upvotes: 0

Swader
Swader

Reputation: 11597

The other answers provide solid guidance, and while it is as simple as simply doing a chained fadeOut.fadeIn, if you want them to fade-in-fade-out at the same time for a nicer effect without any delays and without first waiting for one to fadeout and the other to fade in, you can do what I did in this fiddle:

http://jsfiddle.net/gLaDq/22/

Upvotes: 1

Franquis
Franquis

Reputation: 743

first, you need to add ids or class to your links. I.E:

<a href="#" id="jane_doe" class="client">Jane Doe</a>

Then, with jQuery:

   $('.client').click(function(){
//When you click on a link which has the 'client' class...

$('#client_details').fadeOut(100).html('the client details information').fadeIn(100);
});

If you need to load the client info, have a look on Ajax ($.post(), $.load())

Upvotes: 0

Related Questions