CODEWITHSUNDEEP
javascriptjquery
Laxman Mgr
Laxman Mgr

Reputation: 31

How to animate selected paragraph?

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

I want to animate second paragraph in the above HTML code. I have tried this below jQuery Code.

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

Upvotes: 1

Views: 49

Answers (2)

Sushil
Sushil

Reputation: 1131

Instead of using an equivalent method use class or data-attr method. :eq() method in a dynamic system mightn't work as expected. Please try this method and leave a response comment if it doesn't work.

$( "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>

Upvotes: 2

Maheer Ali
Maheer Ali

Reputation: 36574

use :nth-child(childNo) for getting the child at index
fadeTo takes two arguments fadeTo(duration,opacity);

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

Upvotes: 0

Related Questions