Проблема с jQuery:наведение, снятие наведения не работает

StackOverflow https://stackoverflow.com/questions/971410

  •  13-09-2019
  •  | 
  •  

Вопрос

У меня возникла проблема.Это мой веб-сайт http://keironlowe.x10hosting.com/ Красные линии, которые перемещаются на панели навигации, вызваны приведенным ниже кодом.Но это работает не так, как задумано.Чего я хочу, так это чтобы красные линии удлинялись при наведении курсора мыши.Но вернитесь к нормальному размеру, когда вы убираете курсор, но это не работает должным образом, это работает только один раз, а затем вам нужно обновить, и это не работает по ссылке home, и она становится меньше, а не длиннее.Помочь?

<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 $('div', '#nav_container').hover(function() {
    $(this).animate({width: '220px'}, 1000);      
}, function() {
    $(this).animate({width: '300px'}, 1000); 
});
});
</script>
Это было полезно?

Решение

Попробуйте позвонить .стоп() перед анимацией:

$(document).ready(function() {
  $('div', '#nav_container').hover(function() {
    $(this).stop();
    $(this).animate({width: '220px'}, 1000);      
  }, function() {
    $(this).stop();
    $(this).animate({width: '300px'}, 1000); 
  });
});

Редактировать: Если вы хотите изменить размер изображения вместо DIV, в котором оно содержится.Попробуй это:

$(document).ready(function() {
     $('#nav_container div').hover(function() {
        $(this).children('img').stop().animate({width: '220px'}, 1000);      
     }, function() {
        $(this).children('img').stop().animate({width: '300px'}, 1000); 
     });
});

Возможно, вам потребуется отрегулировать ширину и продолжительность, чтобы получить желаемый эффект.

Другие советы

это легко исправить, приятель.

напишите следующее в теге script:

$(document).ready(function() {
        $('.box').hover(
          function() {
              $(this).css({ background: 'blue' });
          },
          function() {
              $(this).css({ background: 'black' });
          }
        );
    });

и напишите следующую отметку, и ваш указатель мыши должен улыбаться вам

<div class="box"></div>

упс, забыл упомянуть;написание нескольких селекторов в jquery похоже

('селектор1, селектор2, ...')

который вы по ошибке написали как:

$('div', '#nav_container').наведите курсор мыши(функция() {....

надеюсь, это поможет

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top