Создание divs имеет разную мышь над аффектами

Question

Я новичок в JS и нуждаюсь в помощи!

У меня есть 2 ящика (div), у которых есть ползунок в каждом из них. Когда я нажимаю на кого-либо из них, оба слайдера активируются.

Как сделать так, чтобы каждый div активировался отдельно.

вот мои картины того, что я делаю, может сделать его немного более ясно:

pic.twitter.com/1ju3iZ0KIM - прежде, чем мыши над pic.twitter.com/gmfhl1zl2J - с помощью мыши над

Большое спасибо!

Это мой JS

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('.up-down').mouseover(function(){ 
      $('.default').stop().animate({ 
       height: 0 
      }, 200);       
     }).mouseout(function(){ 
      $('.default').stop().animate({ 
       height: 170 
      }, 200)  
     }) 
    }); 
</script> 

мои дивы

<div class="squareFeedBox"> 
    <div class="up-down"> 
     <div class="slide default"></div> 
     <div class="slide onhover"></div> 
    </div> 
</div> 
<div class="squareFeedBox"> 
    <div class="up-down"> 
     <div class="slide default"></div> 
     <div class="slide onhover"></div> 
    </div> 
</div> 

Мой CSS

/Содержимое коробки/

.squareFeedBox 
{ 
    background-color: #fff; 
    width: 278.5px; 
    height: 207px; 
    margin-right: 16px; 
    margin-bottom: 16px; 
    float: left; 
    border-radius: 3px; 
    box-shadow: 2px 2px 5px #0f2134; 
    overflow: hidden; 
} 

/*upSlider*/ 

.up-down 
{ 
    overflow:hidden; 
    height: 207px; 
    width: 278.5px; 
} 

.slide 
{ 
    width:278.5px; 
    height:207px; 
} 



.default 
{ 
    background-color:#fff; 
    height: 170px; 
    width: 278.5px; 
} 

.onhover 
{ 
    background-color:#1DB7CB; 
    height: 207px; 
    width: 278.5px; 
} 

Answer 1

Добавить «Тхи s "и необязательно заменить $ (document) .ready (function (...)) на $ (function (...)).

<script type="text/javascript"> 
    $(function(){ 
     $('.up-down').mouseover(function(){ 
      $('.default', this).stop().animate({ 
          ^^^^ 
       height: 0 
      }, 200);       
     }).mouseout(function(){ 
      $('.default', this).stop().animate({ 
          ^^^^ 
       height: 170 
      }, 200)  
     }) 
    }); 
</script>