Question

For example, if I want to create a jQuery function on a click for a css class “more-link”, however have multiple instances of “more-link” on the page, how can I force jQuery to only run the animation on the clicked class, and not other ones.

Answer 1

$('element').click(function(){
  $(this).animate({
  //scope is ONLY the element clicked
  });
  $('element').animate({
    //this wi ll animate ALL elements matching the selector. Not what you want.
  });
});

For anyone who finds this answer, the author actually wanted this.

$('.read-more').click(function(){
  var me = $(this);
  $(this).prev('p').animate({
     height: '100%'
  }, function(){
     //lost $(this) scope...me still holds it, we use it below for a reason.
     $(me).fadeOut(400);
     $(me).next('.hide_post-content').delay(400).fadeIn();
  });  
});