如何为选定的段落设置动画？

Question

<p>This is original paragraph. </p>
<p>Click me to see it fade.</p>

我想为上述HTML代码中的第二段设置动画。 我已经在jQuery代码下尝试过这个。

$( "p" ).eq(2).click(function() {
  $( this ).fadeTo( 0.40 );
});

Answer 1

使用class或data-attr方法来代替等效方法。动态系统中的:eq()方法可能无法正常工作。请尝试此方法，如果无效，请留下回应评论。

$( "p.animate-me").click(function() {
  $( this ).fadeTo("slow", 0.40 );
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>This is original paragraph. </p>
<p class="animate-me">Click me to see it fade.</p>

Answer 2

使用:nth-child(childNo)使孩子在索引处
fadeTo接受两个参数fadeTo(duration,opacity);

$( "p:nth-child(2)" ).click(function() {
  $( this ).fadeTo(1, 0.40 );
});