Jquery скользит вниз, только если он еще не виден - PullRequest
Новая
       27

Jquery скользит вниз, только если он еще не виден

1 голос
/ 14 марта 2012

У меня есть простая проблема с использованием Jquery. Я хочу отобразить подробную информацию под заголовками меню, но интерфейс не так гладко. После нескольких часов проб, я вернулся к началу, чтобы посмотреть, есть ли простой ответ

Посмотрите на этот пример

Две проблемы:

  1. Если вы наведите указатель мыши сразу на несколько категорий, чтобы перейти к нужной категории, анимация по-прежнему будет проходить через все остальные анимации, вместо того, чтобы останавливать другие и анимировать только ту, над которой в данный момент находится мышь. .

  2. Если вы наведите курсор мыши на категорию, которая уже открыта, она все равно запускает анимацию, но я хочу, чтобы анимация запускалась, только если содержимое еще не видно. Есть ли простой оператор if, который может это сделать?

Ответы [ 2 ]

3 голосов
/ 14 марта 2012 
$('.content').hide();
var $elms = $('.fruit, .vegetable, .dairy');
$elms.hover(function() {
    var $content = $(this).next('.content');
    $content.stop(1, 1).slideToggle(400);
});

http://jsfiddle.net/elclanrs/GBkMB/1/

Редактировать:

Чтобы предотвратить скольжение контента вверх, вы можете вкладывать div s так: 

<div class="fruit">fruit
    <div class="content fruit_types">apple<br/>bannana<br/>orange</div>
</div>
<div class="vegetable">vegetable
    <div class="content vegetable_types">celery<br/>lettuce<br/>cucumber</div>
</div>
<div class="dairy">dairy
    <div class="content dairy_types">milk<br/>cheese<br/>butter</div>
</div>

jQ: 

$('.content').hide();
var $elms = $('.fruit, .vegetable, .dairy');
$elms.hover(function() {
    var $content = $(this).children('.content'); //<-`children()` not `next()`
        $content.stop(1,1).slideToggle(400);

});

Пример: http://jsfiddle.net/elclanrs/GBkMB/5/

0 голосов
/ 14 марта 2012

Я отредактировал вашу скрипку, чтобы выглядеть так.Должны дать вам представление о том, что вы хотите двигаться вперед:

http://jsfiddle.net/GBkMB/4/

$("body").on("hover", ".fruit, .vegetable, .dairy", function(event){
  if(event.relatedTarget != $(this).next(".content")[0]){
      if(event.type == "mouseenter"){
         $('.content').slideUp('slow');
         $('.'+$(this).attr("class")+'_types').slideDown('slow');
      }else if(event.type == "mouseleave"){
         $('.content').slideUp('slow');
      }
  }              
});
$("body").on("mouseleave", ".content", function(event){
    if(event.relatedTarget != $(this).prev("div")[0]){
      $(this).slideUp('slow');           
    }
});

или: http://jsfiddle.net/GBkMB/6/ @elclanrs answer ++ 

$('.content').on("mouseleave", function(event){
   if(event.relatedTarget != $(this).prev("div")[0]){
      $(this).slideUp('slow');           
    }
});
var $elms = $('.fruit, .vegetable, .dairy');
$elms.on("hover", function(event) {
    var $content = $(this).next('.content');
    if(event.relatedTarget != $content[0]){
        $content.stop(1,1).slideToggle(400);
    }
});
...