javascript - Hideshow DIVs - change current effect to fade - Stack Overflow

admin管理员组

文章数量:1290991

I'm currently using the code below found on web tutorial to show/hide DIVs. It works great but don't like the effect. Would like the DIVs to fade in / fade out instead (or something smoother, for the moment the DIVs are growing from the top-right corner). How could I adapt the code to do this? Youc ans ee it here / Many thanks

function showonlyone(thechosenone) {
     $('.textzone').each(function(index) {
          if ($(this).attr("id") == thechosenone) {
               $(this).show(2000);
          }
          else {
               $(this).hide(2000);
          }
     });
}

I'm currently using the code below found on web tutorial to show/hide DIVs. It works great but don't like the effect. Would like the DIVs to fade in / fade out instead (or something smoother, for the moment the DIVs are growing from the top-right corner). How could I adapt the code to do this? Youc ans ee it here http://jsfiddle/Grek/w4HWn/1/ Many thanks

function showonlyone(thechosenone) {
     $('.textzone').each(function(index) {
          if ($(this).attr("id") == thechosenone) {
               $(this).show(2000);
          }
          else {
               $(this).hide(2000);
          }
     });
}

• javascript
• jquery

Share Improve this question Follow edited Aug 12, 2012 at 20:57 Greg asked Aug 12, 2012 at 20:46 GregGreg 3,0631313 gold badges6161 silver badges107107 bronze badges 4

• 5 Change .show() .hide() to .fadeIn() .fadeOut() – Michael Berkowski Commented Aug 12, 2012 at 20:49
• 1 Are you using an each loop just for finding an element with a specific id? – Ram Commented Aug 12, 2012 at 20:49
• try to get to know the documentation and the lovely search feature on the site api.jquery./fadeOut – Liviu T. Commented Aug 12, 2012 at 21:00
• Thanks, I tried but this is too technical for me at this stage, but will definitely try to improve my js skills – Greg Commented Aug 12, 2012 at 21:02

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Just change .hide() to .fadeOut() and .show() to .fadeIn()

But looking at your example, you could do it much simpler by using data attributes.

Have a look at this example.

You may need absolute positioning or some other technique because the two divs stack up while fading in and out.

You can use fadeIn and fadeOut methods, you can also minify the code, try the following:

function showonlyone(thechosenone) {
     $('.textzone').fadeOut();
     $('#'+thechosenone).fadeIn();
}

---

As you are using jQuery you can use the jQuery click handler:

HTML:

<div class="source-title-box"><span class="activity-title"><a href="#source-region">Our region</a></span></div>
<div class="source-title-box"><span class="activity-title"><a href="#source-oursource">Our source</a></span></div>

jQuery:

$('.activity-title a').click(function(e){
    e.preventDefault()
     var thechosenone = $(this).attr('href');
    $('.textzone').fadeOut(600, function(){
         $(thechosenone).fadeIn(600);
    });   
})

DEMO

本文标签： javascriptHideshow DIVschange current effect to fadeStack Overflow