fading

by Kim Ara

HTML

<button class="btn01">fadeOut!</button>
<button class="btn02">fadeIn!</button>
<button class="btn03">fadeTo!</button>
<button class="btn04">reset!</button>
<button class="btn05">fadeToggle!</button>

<div class="owl-stage">
<div class="owl-item">
  <div class="item">
  <a href="#wrangler-sport">
    <img src="http://www.jeep.co.kr/17_wrangler/images/vlp/Modelizer/sport/2017-Jeep-Wrangler-VLP-Modelizer-Side-Profile-Sport.png.image.300.png" alt="Wrangler Sport">
    <p>SPORT<br>￦39,900,000</p>
  </a>						
  </div>
 </div>
 
<div class="owl-item">
  <div class="item">
  <a href="#wrangler-sahara">
    <img src="http://www.jeep.co.kr/17_wrangler/images/vlp/Modelizer/sahara/2017-Jeep-Wrangler-Unlimited-VLP-Modelizer-Side-Profile-Sahara.png.image.300.png" alt="Wrangler Sahara">
    <p>SAHARA<br>￦51,400,000</p>
  </a>
  </div>
</div>
  
<div class="owl-item">
  <div class="item">
  <a href="#wrangler-rubicon-2">
    <img src="http://www.jeep.co.kr/17_wrangler/images/vlp/Modelizer/rubicon-2/2017-Jeep-Wrangler-VLP-Modelizer-Side-Profile-Rubicon.png.image.300.png" alt="Wrangler Rubicon 2-door">
    <p>RUBICON 2-door<br>￦46,400,000</p>
  </a>	
  </div>
</div>

<div class="owl-item">
  <div class="item">
    <a href="#wrangler-rubicon-4">
      <img src="http://www.jeep.co.kr/17_wrangler/images/vlp/Modelizer/rubicon-4/2017-Jeep-Wrangler-Unlimited-VLP-Modelizer-Side-Profile-Rubicon.png.image.300.png" alt="Wrangler Rubicon 4-door">
      <p>RUBICON 4-door<br>￦48,400,000</p>
    </a>										
   </div>
</div>         
          
</div>

CSS

img{width:100%}
.owl-stage{width:800px;margin:20px 0}
.owl-stage:after{content:'';display:block;clear:both}
.owl-item{float:left;width:25%}
.item p{font-size: 14px; font-weight: 700; margin: 4% 0; font-family: Roboto; color: #000;text-align: center; line-height: 17px;}

.active{border-bottom:2px solid pink}

JavaScript

$(document).ready(function(){
	
  $('div.owl-item').hover(function(){
    	$(this).children().addClass('active');
    }, function(){
    	$(this).children().removeClass('active');
    }
  );

  $('.btn01').click(function(){
  	$('.owl-item').fadeOut(500);
  });
  $('.btn02').click(function(){
  	$('.owl-item').fadeIn(500);
  });
  $('.btn03').click(function(){
  	$('.owl-item').fadeTo(500, 0.5);
  });
 $('.btn04').click(function(){
  	$('.owl-item').fadeTo(500, 1);
  });  
  $(".btn05").click(function() {
    $(".owl-item").fadeToggle("slow", "linear");
  });


});