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

Posted 2023-05-08

【中文标题】jQuery切换上一个兄弟元素中元素的不透明度

【英文标题】：jQuery Toggle opacity of an element inside the previous sibling

【发布时间】：2014-09-19 21:45:23

【问题描述】：

我有一个图像和一个 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，但如何将动画应用于嵌套在前一个兄弟内的元素？

【问题讨论】：

什么你不只是选择它的类名？比如$(".text-content").fadeToggle();。或$(this).prev(".hide-first").childeren(".text-content").fadeToggle(); .

@JafarRasooli - 抱歉，我试过了，但没有用。

【参考方案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-contentdisplay:none

这是更新后的fiddle

【讨论】：

嗨，我试过了，但它使滑动 div 的背景颜色也淡入/淡出...我希望滑动 div 的背景颜色在向下/向上滑动时是纯色的，我只想要要淡入的文本内容。

我已经更新了我的评论和你想要的东西

太好了，谢谢！在 CSS 中，我输入了 .text-contentopacity:0;，但无法弄清楚为什么它不起作用......