Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Проблема с hover (https://javascript.ru/forum/jquery/53762-problema-s-hover.html)

Vadim7423 17.02.2015 09:50

Проблема с hover
 
Добрый день. Столкнулся с такой проблемой:
Делаю слайдер на jquery, в данном слайдере присутствует скрытый блок, который появляется при наведении мыши. Так вот при клике на кнопку вправо больше 7 раз данный блок перестает всплывать, влево же достаточно сделать один клик, чтобы появилась подобная проблема. Подскажите, пожалуйста, каким образом решить мою задачу? Предполагаю ,что не правильно осуществил смену контента по клику, но не знаю как исправить.

Вид слайдера:



Клик по кнопкам вправо-влево:
$('.carousel-button-right2').click(function(){
  for(var i = 1; i <= 7; i++){
   if(i%2 == 0){
         $('.carousel-items2 > div').eq(i).removeClass('carousel-block2').addClass('carousel-block3');
   }else{
        $('.carousel-items2 > div').eq(i).removeClass('carousel-block3').addClass('carousel-block2');
   }
  }
})
$('.carousel-button-left2').click(function(){
  var mass=[1,0,7,6,5,4,3];
  for(var i = 0; i <= mass.length; i++){
   if(mass[i]%2 == 0){
         $('.carousel-items2 > div').eq(mass[i]).removeClass('carousel-block2').addClass('carousel-block3');
   }else{
        $('.carousel-items2 > div').eq(mass[i]).removeClass('carousel-block3').addClass('carousel-block2');
   }
  }
})


Эффект при наведении:
$('.carousel-block2-inside').hover(function(){
  $('.carousel-block2-inside > a > div > span').css({"display": "block"}).slideDown(500);
},
function(){
  $('.carousel-block2-inside > a > div > span').slideUp(500);
})


HTML:
<div class="carousel2">
         <div class="carousel-wrapper2">
          <div class="carousel-items2">
           <div class="carousel-block2">
                <div class="carousel-block2-inside">
                 <a href=""><img src="images/1.jpg" alt="" />
                  <div>
                   <h3>Команда "Никельщик" вновь порадовала уфалейских болельщиков</h3>
                   <span>Команда "Никельщик" вновь порадовала уфалейских болельщиков Команда "Никельщик" вновь</span>
                  </div>
                 </a>
                </div>
           </div>
           <div class="carousel-block3">
                <div class="carousel-block2-inside">
                 <a href=""><img src="images/2.jpg" alt="" />
                  <div>
                   <h3>Супруги Хасановы отметили 50-летие совместной жизни</h3>
                   <span>Супруги Хасановы отметили 50-летие совместной жизни Супруги Хасановы отметили 50-летие совместной жизни</span>
                  </div>
                 </a>
                </div>
           </div>
           <div class="carousel-block2">
                <div class="carousel-block2-inside">
                 <a href=""><img src="images/3.jpg" alt="" />
                  <div>
                   <h3>Благотворительный концерт "Мы помним! Мы гордимся!"</h3>
                   <span>Благотворительный концерт "Мы помним! Мы гордимся!" Благотворительный концерт "Мы помним! Мы гордимся!"</span>
                  </div>
                 </a>
                </div>
           </div>
           <div class="carousel-block2">
                <div class="carousel-block2-inside">
                 <a href=""><img src="images/4.jpg" alt="" />
                  <div>
                   <h3>«Ветер перемен»</h3>
                   <span>«Ветер перемен» «Ветер перемен» «Ветер перемен» «Ветер перемен»</span>
                  </div>
                 </a>
                </div>
           </div>
           <div class="carousel-block2">
                <div class="carousel-block2-inside">
                 <a href=""><img src="images/1.jpg" alt="" />
                  <div>
                   <h3>Команда "Никельщик" вновь порадовала уфалейских болельщиков</h3>
                   <span>Команда "Никельщик" вновь порадовала уфалейских болельщиков Команда "Никельщик" вновь</span>
                  </div>
                 </a>
                </div>
           </div>
           <div class="carousel-block2">
                <div class="carousel-block2-inside">
                 <a href=""><img src="images/2.jpg" alt="" />
                  <div>
                   <h3>Супруги Хасановы отметили 50-летие совместной жизни</h3>
                   <span>Супруги Хасановы отметили 50-летие совместной жизни Супруги Хасановы отметили 50-летие совместной жизни</span>
                  </div>
                 </a>
                </div>
           </div>
           <div class="carousel-block2">
                <div class="carousel-block2-inside">
                 <a href=""><img src="images/3.jpg" alt="" />
                  <div>
                   <h3>Благотворительный концерт "Мы помним! Мы гордимся!"</h3>
                   <span>Благотворительный концерт "Мы помним! Мы гордимся!" Благотворительный концерт "Мы помним! Мы гордимся!"</span>
                  </div>
                 </a>
                </div>
           </div>                 
           <div class="carousel-block2">
                <div class="carousel-block2-inside">
                 <a href=""><img src="images/4.jpg" alt="" />
                  <div>
                   <h3>«Ветер перемен»</h3>
                   <span>«Ветер перемен» «Ветер перемен» «Ветер перемен» «Ветер перемен»</span>
                  </div>
                 </a>
                </div>
           </div>
          </div>
         </div>
         <div class="btn-over1">
          <div class="carousel-button-left2"><a href="#"></a></div>
         </div>
         <div class="btn-over2">
          <div class="carousel-button-right2"><a href="#"></a></div>
         </div>
        </div>

рони 17.02.2015 10:53

Vadim7423,
hover заменить на on mouseenter .carousel-block2-inside и on mouseleave .carousel-block2-inside - ставить на
Цитата:

Сообщение от Vadim7423
div class="carousel2"

в анимацию добавить stop(true,true)

рони 17.02.2015 10:58

Vadim7423,
второй вариант ваш случай тут
http://javascript.ru/forum/jquery/52...tml#post348352


Часовой пояс GMT +3, время: 06:06.