JQuery проблема: зависание, un-hover не работает - PullRequest
Новая
       10

JQuery проблема: зависание, un-hover не работает

2 голосов
/ 09 июня 2009

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

<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>

Ответы [ 3 ]

6 голосов
/ 09 июня 2009

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

$(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); 
     });
});

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

0 голосов
/ 09 июня 2009

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

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

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

$ ('div', '#nav_container'). Hover (function () {....

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

0 голосов
/ 09 июня 2009

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

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

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

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

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