jQuery animate problem

Я создаю «простое» анимированное меню с помощью .animate(), чтобы увеличить элемент меню, который пользователь наводит. Это работает почти правильно, но это делает некоторые странные вещи, если они быстро перемещают курсор. Плюс элементы не всегда оживляют одновременно.jQuery animate problem

Самый простой способ показать это по следующей ссылке.

http://jsfiddle.net/322c5/2/

или

<head> 
<script src="jquery-ui/js/jquery-1.4.2.min.js"></script> 
<script> 
$(document).ready(function(){ 

$("#test1").hover(function() { 
    $(this).animate({ width:"599px",left:"0px", height:"168px" }, 100) 
    }, 
    function() { 
    $(this).animate({ width:"246px",left:"9px", height:"84px" }, 100) 
    } 
); 

$("#test2").hover(function() { 
    $(this).animate({ width:"599px",left:"0px", height:"168px", top:"-21px" }, 100) 
    $(".test").animate({ top:"-21px" }, 100) 
    }, 
    function() { 
    $(this).animate({ width:"246px",left:"9px", height:"84px", top:"0px" }, 100) 
    $(".test").animate({ top:"0px" }, 100) 
    } 
); 

$("#test3").hover(function() { 
    $(this).animate({ width:"599px",left:"0px", height:"168px", top:"-63px" }, 100) 
    $(".test").animate({ top:"-63px" }, 100) 
    }, 
    function() { 
    $(this).animate({ width:"246px",left:"9px", height:"84px", top:"0px" }, 100) 
    $(".test").animate({ top:"0px" }, 100) 
    } 
); 

$("#test4").hover(function() { 
    $(this).animate({ width:"599px",left:"0px", height:"168px", top:"-84px" }, 100) 
    $(".test").animate({ top:"-84px" }, 100) 
    }, 
    function() { 
    $(this).animate({ width:"246px",left:"9px", height:"84px", top:"0px" }, 100) 
    $(".test").animate({ top:"0px" }, 100) 
    } 
); 



}); 

</script> 
<style type="text/css"> 
    .container { 
     width:599px; background-color:#000;padding:0px; height:336px; overflow-y:hidden; 
    } 

    .test { 
     width:246px; background-color:#039; left:9px; top:0px; position:relative; height:84px; 
    } 
</style> 
</head> 

<body> 

    <div class="container"> 
     <div id="test1" class="test"> 
     test 
     </div> 
     <div id="test2" class="test"> 
      test 
     </div> 
     <div id="test3" class="test"> 
      test 
     </div> 
     <div id="test4" class="test"> 
      test 
     </div> 
    </div> 

</body>

Любые идеи?

Благодаря

источник

2010-10-01 Tom

Ссылка на живые примеры замечательная, но ** всегда ** также включает соответствующий код в ваш реальный вопрос. Внешние ссылки могут исчезать, переименовываться и т. Д., И в идеале людям не следует следовать ссылке, чтобы ответить на ваш вопрос. –

'mouseover' срабатывает * повторно *, вы можете предпочесть вместо этого' mouseenter' (особенно если вы используете 'mouseleave' для другой половины). (Фактически, последние версии jQuery имеют ярлык для подключения пар 'mouseenter' /' mouseleave': ['hover'] (http://api.jquery.com/hover/).) Но это не полный ответ , –

вот мое решение: http://jsfiddle.net/azLMc/

Я добавил вызов clearQueue() для каждой функции MouseLeave(). который остановит анимацию мыши, и немедленно выполнит анимацию mouseleave. без него анимация mouseover будет продолжать работать, и если мышь покинула область до ее завершения, она не будет регистрировать, что ей нужно запустить анимацию mouseout.

После этого первый DIV все еще застревал, когда мышь быстро покинула документ. поэтому я добавил mouseleave() в .container DIV, чтобы вернуть первый DIV к его нормальному размеру и вроде «сбросить».

источник

2010-10-01 16:25:32

Либо:

1.) Оставьте высоту неизменной или

2.) имеют триггер Hover отдельное смещение DIV, чтобы показать/скрыть

, когда изменение высот где-нибудь под верхним элементом, можно двигаться, чтобы подвести другой элемент под мышью, заставив его вызвать его разворот/контракт, но он задерживается из-за вашего времени перехода и в то время, когда происходит цикличность, другой элемент перемещается e ither в или из фокуса под вашим курсором.

источник

2010-10-01 16:12:11 FatherStorm

+1 Я думаю, что это большая часть того, что происходит, чем вещь «mouseneter». Я попробовал редактирование, даже бросил 'stop', помог некоторым, но не достаточно. –

jQuery animate problem

ответ

Смежные вопросы