Question

单击“关于”按钮时，我有一个图像和下面的div有一个幻灯片切换效果。

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"}); 
});

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

正如您所看到的，我知道如何在点击时定位上一个兄弟.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

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

1 个答案: