Question

我想通过点击预告片在同一页上同时淡化两个内容：例如点击#teaser2，＃backstage2和＃content2中的内容同时淡出。

看看我的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>

我在这里找到了“http://www.brightyoursite.com/blog/2010/01/23/nice-jquery-content-slider/”一些不错的代码，但仅适用于一个内容-DIV ...... 希望您理解“德语式”英语 - 感谢您的帮助

希斯

Answer 1

尝试

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

Answer 2

试

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

<强> DEMO

Answer 3

虽然我没有使用suSlider插件，但我认为我得到的结果和你想要的结果相同，只是使用了jQuery和jQueryUI： http://jsfiddle.net/marcosfromero/K9jNP/

两个内容的jQuery推子

3 个答案: