jQuery find,filter / animate 활용

html

html
<header class="page-header" role="banner">
  <h1>hover_img_caption</h1>
</header>

<div class="page-main" role="main">
  <div id="images">
    <h2>IMAGES</h2>
    <div class="inner clearfix">
      <p>
      	<img src="https://i.pinimg.com.jpg">
          <strong>caption</strong>
		  <span></span>
      </p>
      <p>
      	<img src="https://i.pinimg.com.jpg">
          <strong>caption</strong>
		  <span></span>
      </p>
      <p>
      	<img src="https://i.pinimg.com.jpg">
          <strong>caption</strong>
		  <span></span>
      </p>
    </div>
  </div>
</div>

선택자 응용 find, filter

공백 o = find
공백 x = filter
#images p span { } -> $image.find('span')
#images p.strong { } -> $image.filter('strong')
span,strong { } -> $image.find('span, strong')
#images p:nth-child(2) -> $image.filter(':nth-child(2)')

var $duration = 300,
    $image = $('images p');

$image.filter(':nth-child(1)').mouseover(function(){
  $(this).find('span, strong').stop().animate({opacity:1},$duration)
})
.mouseout(function(){
  $(this).find('span, strong').stop().animate({opacity:0},$duration)
})