JQuery наведение нескольких элементов одна функция

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

например, I опрокидывание div1, div1 внутренний появляется, я свинец, div1 внутренний исчезает.

Однако, когда я перемещаю мышь из div1 непосредственно над div2, оба рассматриваются как свиток, например, div1 inner исчезает (как и должно быть), появляется div2 inner (как и должно быть), но затем мгновенно исчезает с div1 inner.

Помимо написания отдельных функций для div1 2 и 3, я не уверен, что делать, любая помощь очень ценится !!

jsfiddle.net/user1688604/UZpEH/3

var box = $("#box1,#box2,#box3"); 
var inner = $(".item"); 


$(box).hover(function() { 
    $(this).find(inner).stop(true,true).css({"left":"20px"}).animate({"top":"-10px", "opacity": "1"},400); 

}, function() { 
    $(this).find(inner).stop(true,true).animate({"top":"-20px", "opacity": "0"},400, function() { 
     $(inner).css({"left":"-9999px", "top":"0"}); 
     }); 
}); 



<div id="box1"> 
<div class="item"></div> 
</div> 

#box1, #box2, #box3 { 
      width: 300px; 
      float: left; 
      margin-right: 20px; 
      position: relative; 
      } 


      .item { 
       width: 151px; 
       height: 49px; 
       padding: 5px 10px 0; 
       opacity: 0; 
       position: absolute; 
        top: 0; 
        left: -9999px; 
       }

источник

2013-02-20 user1688604

Добавьте класс к коробке дивы (тот же класс для каждого)

<div id="box1" class="box"> 
    <div class="item"></div> 
</div>

JQuery

$(".box").hover(function(){ 
    $(this).find(".item").stop(true,true).css({"left":"20px"}).animate({"top":"-10px", "opacity": "1"},400); 
},function(){ 
    $(this).find(".item").animate({"top":"-20px", "opacity": "0"},400, function() { 
     $(this).css({"left":"-9999px", "top":"0"}); 
    }); 
});

источник

2013-02-20 14:43:03

Спасибо за ваш быстрый ответ, я добавил jsfiddle: http://jsfiddle.net/user1688604/UZpEH/3/ Это все еще происходит, я думаю, что, возможно, анимация развертывания не успевает закончить, если вы перейдете на следующий ящик слишком быстро? – user1688604

Исправлено это с моим кодом..http: //jsfiddle.net/UZpEH/5/ Вы не можете объявить $ (". Item") за пределами зависания, потому что он потянет все div с элементом класса и запустит анимация на всех из них. –

Я также рекомендую hoverIntent при выполнении функций зависания. http://cherne.net/brian/resources/jquery.hoverIntent.html –

На Какой бы DIV или любые поля, вы хотите предоставить функцию парения просто позвонить, то с таким же именем класса, а затем вызвать вашу функцию, ссылаясь, что имя класса.

источник

2013-02-20 14:43:02 EnterJQ

Спасибо за быстрый ответ, я добавил jsfiddle: jsfiddle.net/user1688604/UZpEH/3 Это еще случается, я думаю, может быть, анимация развертывания не успевает закончить, если вы перейдете в следующую ячейку слишком быстро? – user1688604

Попробуйте, как показано ниже ... это поможет вам ..

Keep Same класс для всех DIV .. и попробуйте ниже.

Fiddle Пример: http://jsfiddle.net/RYh7U/96/

HTML:

<div class="divBox"> 
    Show Div1 
<div class="item"> 
Div 1  
</div> 
</div> 

<div class="divBox"> 
    Show Div 2 
<div class="item"> 
    Div 2 

</div> 
</div> 

<div class="divBox"> 
    Show Div 3 
<div class="item">  
    Div 3 
</div> 
</div>

JQuery:

$('.item').hide(); 
$('.divBox').hover(function() { 
    $(this).children('.item').show();  
}, function() { 
    $(this).children('.item').hide(); 
});

источник

2013-02-20 15:02:20 Pandian

JQuery наведение нескольких элементов одна функция

ответ

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