jQuery fader for two contents

问题

I want to fade two contents the same time on one page by clicking a teaser: e.g. click on #teaser2 the contents in #backstage2 and #content2 are fading in the same time.

look at my html

<!-- backstage content is in a separate div -->
<div id="backstage">
     <div id="bigpicture1"> 
        <img src="img1.jpg" width="800" height="600" /> 
    </div> 
    <div id="bigpicture2"> 
        <img src="img2.jpg" width="800" height="600" /> 
    </div> 
    <div id="bigpicture3"> 
        <img src="img3.jpg" width="800" height="600" /> 
    </div>   
</div>

<!-- stage content is also in a separate div -->
<div id="stage"> 
    <div id="content1"> 
        <h2>Loremipsum 1</h2> 
        <p>Nam liber tempor cum soluta nobis eleifend.<a href="#">mehr ...</a></p> 
    </div> 
    <div id="content2"> 
        <h2>Loremipsum 2</h2> 
        <p>Nam liber tempor cum soluta nobis eleifend.<a href="#">mehr ...</a></p> 
    </div> 
    <div id="content3"> 
        <h2>Loremipsum 3</h2> 
        <p>Nam liber tempor cum soluta nobis eleifend.<a href="#">mehr ...</a></p> 
    </div>   
</div> 

<!-- teasers are in a separate div -->
<div id="teaser"> 
    <ul> 
        <li id="teaser1"><img src="img1_thumb.jpg" alt="" /></li> 
        <li id="teaser2"><img src="img2_thumb.jpg" alt="" /></li> 
        <li id="teaser3"><img src="img3_thumb.jpg" alt="" /></li> 
    </ul> 
</div>

I found here "http://www.brightyoursite.com/blog/2010/01/23/nice-jquery-content-slider/" some nice code but works only with one content-DIV... Hope you understand "german-style" english - thanks for your help

Ottmar

回答1:

Although I didn't use suSlider plugin, I think I got the same results as you are looking for but just using jQuery and jQueryUI: http://jsfiddle.net/marcosfromero/K9jNP/

回答2:

Try

$("#backstage2 , #content2").fadeOut();

回答3:

try

jQuery('#teaser2').bind('click', function() {
 jQuery('#backstage2 , #content2').fadeOut();
});

DEMO

来源：https://stackoverflow.com/questions/5272725/jquery-fader-for-two-contents

标签

javascript

jquery

fade