jQuery切换上一个兄弟元素中元素的不透明度

Question

我有一个图像和一个 div，当单击“关于”按钮时，它下面有一个滑动切换效果。

JSFIDDLE here

HTML

<section class="watch-block">
<div class="illustration-wrapper">
<img src="http://placehold.it/300x300" title="watch text"/>
</div>
<div class="watch-text hide-first">
<div class="inner-padding text-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quibusdam fugit cum dignissimos quas voluptatibus tenetur magni, voluptates dolores veniam sapiente sunt aut perspiciatis laudantium, dolor pariatur sit excepturi nemo.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quibusdam fugit cum dignissimos quas voluptatibus tenetur magni, voluptates dolores veniam sapiente sunt aut perspiciatis laudantium, dolor pariatur sit excepturi nemo.</p>
</div>
</div>
<div class="toggle-wrapper"><span>About</span></div>
</section>

CSS

.watch-block {width:400px;}     
.illustration-wrapper {background-color: red;}
.illustration-wrapper img {display: block; margin: 0 auto; padding: 1em 0;}
.watch-text {color: #fff; text-align: center;}
.toggle-wrapper {width: 40px;height: 40px;margin: 0 auto;}
.watch-text, .toggle-wrapper {background-color:#FF530D; cursor: pointer;}
.watch-text p:first-child {margin-top: 0;}
.watch-text .inner-padding {padding: 2em;}

jQuery

$(".hide-first").hide();
$(".toggle-wrapper").click(function() {
$(this).prev(".hide-first").animate({ height: "toggle"}); 
});

如何让文本.text-content 在用户单击以显示 div 时淡入，然后在用户单击以隐藏 div 时淡出文本？

如您所见，我知道如何在点击时定位前一个兄弟.hide-first，但如何将动画应用于嵌套在前一个兄弟内的元素？

Answer 1

jquery

    $(".hide-first").hide();
    $(".toggle-wrapper").click(function() {
    $(this).prev(".hide-first").find('.text-content').animate( {opacity:"toggle" });
    $(this).prev(".hide-first").animate({ height: "toggle"});  
     });

css

.text-content{display:none}

这是更新后的fiddle