Back To Website Design Forum

help me about Jquery fadeIn and fadeOut

  • huangweiqiu
  • Novice
  • Novice
  • No Avatar
  • Joined: Oct 07, 2007
  • Posts: 21
  • Status: Offline

Post April 11th, 2009, 9:20 am

I am a beginner,I need your help

I use below snippets to toggle all the content of <P>,I can click the <span> which class is ".collapse" to show/hide the <p>. But I want to use fadeIn/fadeOut effect,I don't know how to do to let I can just click the same <span> to control fadein/fadeout.thanks in advance.

Code: [ Select ]
$(function()
{
$("p").slideToggle("1");
$(".collapse").click(function(event) {
event.preventDefault();
$(this).parents(".offset").find("p").slideToggle("1000");
});
});
  1. $(function()
  2. {
  3. $("p").slideToggle("1");
  4. $(".collapse").click(function(event) {
  5. event.preventDefault();
  6. $(this).parents(".offset").find("p").slideToggle("1000");
  7. });
  8. });
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post April 11th, 2009, 9:20 am

  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Joined: Jul 25, 2005
  • Posts: 2735
  • Loc: Nashville, TN
  • Status: Offline

Post April 14th, 2009, 9:02 am

Have a look at the basic slidetoggle documentation here. I assume you just want to use a span instead of a button? If that's the case, then something like this would do it:

Code: [ Select ]
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
 
  <script>
  $(document).ready(function(){
   
    $("span").click(function () {
      $("p").slideToggle("slow");
    });
 
  });
  </script>
  <style>
  p { width:400px; }
  </style>
</head>
<body>
  <span>Toggle</span>
  <p>
    This is the paragraph to end all paragraphs.  You
    should feel <em>lucky</em> to have seen such a paragraph in
    your life.  Congratulations!
  </p>
</body>
</html>
 
  1.  
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  3.                     "http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5. <head>
  6.   <script src="http://code.jquery.com/jquery-latest.js"></script>
  7.  
  8.   <script>
  9.   $(document).ready(function(){
  10.    
  11.     $("span").click(function () {
  12.       $("p").slideToggle("slow");
  13.     });
  14.  
  15.   });
  16.   </script>
  17.   <style>
  18.   p { width:400px; }
  19.   </style>
  20. </head>
  21. <body>
  22.   <span>Toggle</span>
  23.   <p>
  24.     This is the paragraph to end all paragraphs.  You
  25.     should feel <em>lucky</em> to have seen such a paragraph in
  26.     your life.  Congratulations!
  27.   </p>
  28. </body>
  29. </html>
  30.  
I'd love to change the world, but they won't give me the source code.
  • huangweiqiu
  • Novice
  • Novice
  • No Avatar
  • Joined: Oct 07, 2007
  • Posts: 21
  • Status: Offline

Post April 14th, 2009, 6:37 pm

thanks,UPSguy,but I don't want toggle effect,I want fadeIn/fadeOut effect as the [url]designfloat.com[/url]
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Joined: Jul 25, 2005
  • Posts: 2735
  • Loc: Nashville, TN
  • Status: Offline

Post April 14th, 2009, 7:12 pm

I don't see the jquery on the site you're pointing at, so hopefully this is what you're wanting. Had to work on this one for just a minute ;) Didn't see it readily out there anywhere...

EDIT: OK, I see the summaries now, and yeah, this should do you.

Code: [ Select ]
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
 
  <script>
  $(document).ready(function(){
   
    $("span").click(function () {
      $("p").each(function() {
        vis = $(this).css("visibility");
        if(vis == "visible") {
          $(this).fadeOut('slow',function() {
            $(this).css("visibility","hidden");
          });
        } else {
          $(this).css("visibility","visible");
          $(this).fadeIn('slow');
        }
      });
    });
  });
  </script>
  <style>
  p { width:400px; }
  </style>
</head>
<body>
  <span>Toggle</span>
  <p>
    This is the paragraph to end all paragraphs.  You
    should feel <em>lucky</em> to have seen such a paragraph in
    your life.  Congratulations!
  </p>
</body>
</html>
 
  1.  
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  3.                     "http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5. <head>
  6.   <script src="http://code.jquery.com/jquery-latest.js"></script>
  7.  
  8.   <script>
  9.   $(document).ready(function(){
  10.    
  11.     $("span").click(function () {
  12.       $("p").each(function() {
  13.         vis = $(this).css("visibility");
  14.         if(vis == "visible") {
  15.           $(this).fadeOut('slow',function() {
  16.             $(this).css("visibility","hidden");
  17.           });
  18.         } else {
  19.           $(this).css("visibility","visible");
  20.           $(this).fadeIn('slow');
  21.         }
  22.       });
  23.     });
  24.   });
  25.   </script>
  26.   <style>
  27.   p { width:400px; }
  28.   </style>
  29. </head>
  30. <body>
  31.   <span>Toggle</span>
  32.   <p>
  33.     This is the paragraph to end all paragraphs.  You
  34.     should feel <em>lucky</em> to have seen such a paragraph in
  35.     your life.  Congratulations!
  36.   </p>
  37. </body>
  38. </html>
  39.  


Setting the visibility on and off isn't particularly required by the jquery, but it provides a flag to know the current state of the paragraph. Just know that this will control all paragraphs in your page - if you want to get specific, give your paragraph an id or group of paragraphs a particular empty css class and use these mechanisms in your jquery selector instead of p.
I'd love to change the world, but they won't give me the source code.
  • huangweiqiu
  • Novice
  • Novice
  • No Avatar
  • Joined: Oct 07, 2007
  • Posts: 21
  • Status: Offline

Post April 15th, 2009, 1:07 am

UPSGuy,you are so kind,thanks very much for your help ,it works perfectly.
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Joined: Jul 25, 2005
  • Posts: 2735
  • Loc: Nashville, TN
  • Status: Offline

Post April 15th, 2009, 4:48 am

No problem, glad to help. You know where to find me. ;)
I'd love to change the world, but they won't give me the source code.

Page 1 of 1

Post Information

  • Total Posts in this topic: 6 posts
  • Users browsing this forum: No registered users and 151 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.