Continuing from yesterday, today we’ll take a look at the “fadeIn”, “slideDown”, and “show” methods. We’ll also examine jQuery’s “css” abilities.
Day 2: Fade, Slide, and Show Methods
- Subscribe to the ThemeForest RSS Feed for more daily web development tuts and articles.
richard
November 21st, 2008
this is a great series!
Nikola
November 21st, 2008
Thanx! Love it
sebastian
November 21st, 2008
great stuff, thanks
Jon
November 21st, 2008
thank you!
twodayslate
November 21st, 2008
I just stated learning jquery today. This has helped a lot!
Nikhil
November 21st, 2008
This is great…Need to learn all this for coding websites like you guys do.
Chandra
November 22nd, 2008
This is indeed a great series. I am looking to learn jQuery and have started a bit. This would definitely be very helpful. I look forward to upcoming videos as well as intermediate or even advanced series in near future.
Any plan?
Marko
November 22nd, 2008
Thanks Jeffrey!
Travis
November 22nd, 2008
That was great… As someone who hasn’t opened a book or anything on jQuery Im starting to feel comfortable editing scripts.
nic
November 22nd, 2008
great stuff! thanks for breaking it down.
Jamie
November 23rd, 2008
I was just waiting to receive my confirmation email and came across this video. Well done on a great tutorial, I haven’t seen the first episode of this tutorial - but if you haven’t done so already you could help beginners alot with jQuery by showing them how to reference an external JavaScript file within Visual Studio 2008 so that they can share methods between the two files and include the very helpful Intellisense jquery file.
Apologises though if this has been mentioned else where.
Kaly
November 23rd, 2008
This is awesome man. Thanks very much for this great tuts series.
Charlie
November 23rd, 2008
I always wanted to learn JQuery but was a little bit intimidated. This series is fantastic for someone not knowing a bit of Java. Thanks!!!
chris simpson
November 24th, 2008
amazing series…. please continue!! :]
Scottie C
November 24th, 2008
Great turtorials!
I wondered if anyone can answer this question for me. I have a menu that has an accordion effect, i want it so that when i click the different buttons, i use the .load function so it goes and grabs a url and displays it in my content area, but when i try and set this up, it will only work on one button and the others do nothing, anyone got an idea what is wrong?
Thanks for any help
Jamie
November 24th, 2008
I believe you can only load internal pages. External pages should throw a BAD URI error. So yea’ you can’t load external pages into your own pages.
$(’a').click(function(e)
{
e.preventDefault(); // Stop page from loading normally
$href = $(this).attr(’href’); // Grab the href from the anchor
//alert($href);
$(’#content’).load($href); // Load into div#content
});
Hope this helps.
Bennie Mosher
November 24th, 2008
Came out nice. I can’t wait for some actual ways to use this stuff. Thanks for the work.
Jumba
November 25th, 2008
Thanks so much, great tut! Can’t wait for the rest!
Jimmy
November 26th, 2008
Awesome series. I learned a lot from the first two videos. Onto the next two!
Ryan
December 8th, 2008
These videos are great for people that have had no experience with javascript before! Thanks!
Steve
December 10th, 2008
You can change CSS too?! Sweet! Thanks a bunch - going to try to watch them all today.
v-render
December 11th, 2008
nice informative tutorial !
SaravanaMuthu
December 12th, 2008
Nice Series
AnDi
December 13th, 2008
Great Series, thank you
Jysta
December 14th, 2008
5*Star stuff mate! Great in small chunks like this, always wanted to add some extra jQuery magic to my themes :-))
Yoshikee
December 14th, 2008
thankyou!! I love this series!!
Marko
December 15th, 2008
The first one was really nice and simple. Let’s see what I’ll learn from this one.
Renzo
December 15th, 2008
Excelent lessons!
Fer
December 15th, 2008
Super !
Nice and easy explained by you
Los
December 24th, 2008
I can’t see the video. Whats up with that?
pixeam
December 24th, 2008
Thankyou so much for the well explained video!
David Andersson
December 27th, 2008
What happened with the videos?
David P
January 2nd, 2009
Ok, so this calls the function for all links. I noticed when I clicked on one of our “red” links that it also would change the color and fade the box. If I want it only on the “click me” link, I’d have to make some other kind of div or CSS code special for that one?
David P
January 2nd, 2009
Nevermind, Day 4 addresses that issue. Sorry
Fawad Awan
January 5th, 2009
Great Resource of learning JQuery.Hats off for this effort.
Mirax
January 10th, 2009
Awesome. Thanks alot.
salim
January 11th, 2009
thx jeffery it,s so funny your lessons i need more & more fun do some thing creazy hehehehehehe
Anya
January 11th, 2009
This is Great Site tutorial for Me (beginer) .. thx allottttttttt
Chad Turner
January 12th, 2009
Hello,
I am trying to write a function that allows you to roll over one object and show a div tag that has another menu but if you roll over another image it hides that tag.
Can you notice me doing anything wrong?
rolling over the image called direct works while the other does not.
http://boltfromtheblue.com/newsite/www/index.php
$(function() {
$(’div img[name=direct]‘).hover(function() {
$(’#dramenu’).slideDown();
});
$(’div img[name=what]‘).hover(function(){
$(’#dramenu’).slideUp();
});
});
Svend
January 13th, 2009
Wow great tutorial series! I’m 14 and love php, html, css but i have always had problems with stuff like this, your a great help
Thank you very much!
Luc M
January 13th, 2009
Exactly what I need to start understand JQuery.
Great Job!
Many Thanks!
Yuri
January 18th, 2009
Well done.
John Scott
January 24th, 2009
Just great!
Jorge
January 26th, 2009
wow, this was really great, thanks.
JAYESH
January 28th, 2009
I liked the tutorials very much
Help
January 30th, 2009
This dont work for me, i used firefox and IE to test the code
and nothing happens , i downloaded the same library and nothing happens
i did src the library , what can you do to help me?
Gaurav
February 2nd, 2009
Thanks Jeffrey!
You are teaching so nicely so that anybody can easily understand.
Best Regards,
Gaurav
Ravindra
February 3rd, 2009
Hi Jeffery,
Really, Mind boggling tuts……. N plz do a video series on a small project . It would be very very useful for d beginners….
Cheers
Ravindra
Paul
February 5th, 2009
I LOVE it …. owesome… I have been thinking a lot about jQuery and was looking for something “from 0 to hero’
Gooood job… !
Saurabh
February 5th, 2009
I m lovin it!
Mike
February 6th, 2009
These really are excellent. A couple of times, when it didn’t work, I thought I had done exactly what you said, but turned out there was just one tiny thing different…
A question, please? Could you explain how to do more than one fadeIn per page? When I tried two, only one worked.
Many thanks!
Paul
February 6th, 2009
Hi,
I am having text on the website that I would like to show when ‘read more’ link pressed in.
I can not do it accesable ;/// If someone dont have js turned on he/she will be not able to see all the text … maybe there is a way to set up it using different method then CSS display: none ?
And second…. anchor redirects me to # nothing… but my links on the web (nav) stopped to work… etc. how I could not redirect to anything ? using anchor tag?
Thank you for help… and sorry
I am learning ;// all this ;/
BTW ..again… GREAT SERIES !!
Harsha M V
February 7th, 2009
amazing.. i am learning it all in a day thanx///
Mindaugas
February 7th, 2009
This is awesome tutorial! Thanks for your help teaching us!
Linus
February 9th, 2009
Hello. The video can’t start. Can you fix it?
Jeffrey
February 9th, 2009
@Linus - It’s working for me.
Parlian
February 10th, 2009
Thanks a lot,
Your tutorials are really good and a light at the horizon, but I suppose, you do know that.
Hassan
February 13th, 2009
Jeff any good sources on CSS/and stuff??
kryogenic
February 17th, 2009
great stuff another informative tutorial keep it up
charles
February 18th, 2009
awesome series, I was just wondering if there will be a continuation of this series with intermediate to advanced topics/projects?
frank katzer | 1klang.de internetagentur
February 19th, 2009
thanks for those tuts. they are very helpful!
gkhn
February 23rd, 2009
very very tahanks (turkish)
Karim Samir
February 23rd, 2009
Great tutorial
I hope that you will show us some ajax and module boxes and some effects
thanks alot any way
peter
February 25th, 2009
so helpful to me.thanks.
brian
February 25th, 2009
NVM! I got it to work…what happened was, I typed all the content in without allowing the options to go. thanks.
Ryan
February 26th, 2009
Thanks for the great videos. This is really fun stuff to play with.
Thang
March 16th, 2009
I’m looking for learning JQuery. It’s really great video. Thanks for your show.
ASH
March 16th, 2009
fadeIn”, “slideDown”, and “show” methods don’t work for me in I.E 7. Keep getting this error “Microsoft JScript runtime error: ‘jQuery.support.opacity’ is null or not an object”.. tried adding opacity and filter. does not work with css2. please help..
thanks,
Ash
schele
March 17th, 2009
Excellent work. Thanks to guys like you, willing to spend their time to make a tutorial like this knowledge can spread. I hope to become a full time web designer instead of freelance next to a lame-ass job and jquery takes me one step closer, thanks to you.
B-RAD
March 21st, 2009
Finally, in terms I can understand. We are going over all database management, PHP, mySQL in school and Ive been begging my teacher for some basic Javascript as programming has always been HELL for me. Im starting to get PHP under my belt and you are making jQuery in complete understandable terms. KUDOS!! We need more people like you willing to devote good knowledge on instuctor levels!
Gavin
March 23rd, 2009
WoW this tutorial is so easy to understand thanks for putting this up.
Piter
March 23rd, 2009
Jeffrey, THANKS!!!!!!!!!!!!!!!!!!!!!!!!!
Afsar
March 24th, 2009
Grate Job! Wonderful Mind Blowing
Carry on!!!
Nick Rogers
March 25th, 2009
This an excellent series… well done and keep up the good work!
Sam Topham
March 26th, 2009
Thanks so much for this video series!
You’ve seroiusly helped me out this semester!
Sam. UK.
ryan
April 2nd, 2009
great tutorial!
Anonymous
April 3rd, 2009
Why is the video not loading ?
timon
April 9th, 2009
Great !!! Thanks a lot.
Mickey Hoang
April 12th, 2009
Thanks! i just learning jquery.
Christopher
April 14th, 2009
Just wanted to ‘Thank You’, I have been using jQuery BUT I wanted to understand the Framework better.
Keep it up!
Counter
April 30th, 2009
Wow, this is exactly what I needed from a long time. Reading the many tutorials on JQuery had left me all confused. This is a blessing. Thank you, Thank you, Thank you…
william
April 30th, 2009
why i can’t see it?
Joel
April 30th, 2009
This is very helpful. I really appreciate your effort on this. Thank you!!!
Yusuf
May 1st, 2009
is there any way to slide a div to the right or left ? When I click on the hyperlink I want a div to slide right of the hyperlink while hyperlink stays the same place. Thanks in advance!!
Nitin
May 4th, 2009
Thanks man.
Nice series.
Vanrick
May 4th, 2009
Thanks for take the time to make the tutorials ! are so good !
Rishabh Agarwal
May 6th, 2009
nice
Squery
May 7th, 2009
can you do this sort of thing with images?
Codie
May 9th, 2009
Im a major newb, and im loving these videos, you dumb it down so I can understand, I cant say to many people can do that as well as you.
Cheers.
fahad
May 11th, 2009
oooh I love Jq and I love these tutorials these tutorials are the great contribution for the beginers like us. I must say thanks a lot bro.
maruthi
May 15th, 2009
great work sir!!
charlie
May 15th, 2009
Thanks for taking the time to clearly explain.
Umer
May 23rd, 2009
This is just awesome!
Rares
May 27th, 2009
Great tutorials, thanks a lot. I was uncertain what framework I should use, but now I know that jQuery deserves all of my attention.
RKL
June 8th, 2009
The fadeout effect works perfectly in IE, but I can’t make it work in firefox… T_T
Can someone telll me why?
Marcia
June 9th, 2009
Thank You! That was just what I was looking for! Great job!
From Marcia (Brasil)
mabel
June 14th, 2009
Thanks a lot
R. Shawn Williams
June 14th, 2009
Thank you for taking the time to do this. I have to be honest. I’m glad that I waited until you finished so I can learn as much as I can in one sitting!
Great tutorial!
brahim
June 17th, 2009
thank you so much man for this videos ;D
victor
June 20th, 2009
great effort ..great result…. well done!
Amar
June 24th, 2009
Great tutorial. Thanks
myutmost
June 24th, 2009
thank you!
Robert Jackson
June 28th, 2009
Very much obliged to you for these tutorials. Your skill in presenting these tasks in a manner that is easy to understand is much appreciated by myself. Thanks from Scotland.
Robert
Casper
June 30th, 2009
This is pure awsomeness, you rock, way more than the for dummies books…
Abhishek
June 30th, 2009
Amazing tutorials!
First time I realized that jQuery is not such a difficult thing to learn.
Greatest jQuery tutorial on earth!
max
July 2nd, 2009
thanks alot great tut..
naganand
July 5th, 2009
Great stuff, Thanks a lot
codemaster
July 6th, 2009
Excellent, I have never read a book and JQuery and I am already up and running! cheers!
kevin
July 6th, 2009
Your making the web a better place.
Thank You
vype
July 6th, 2009
Great video series!
Thankyou!
Belinda Johnstone
July 8th, 2009
Outstanding…
It’s great when you find exactly what you were looking for, and even better than you were expecting.
mojitopl
July 9th, 2009
appreciate sharing Your knowledge