Question

我的目标是：

鼠标悬停时，淡出'foo'并淡入'bar'
在鼠标输出时淡出'bar'并淡入'foo'

我可以在鼠标悬停时淡出'foo'，但是当我将鼠标移到'bar' div之外时，我无法淡入'bar'然后返回正常状态。

我有以下代码：

HTML

<ul>
  <li>
    <div class="foo"></div>
    <div class="bar"></div>
  </li>
  <li>
    <div class="foo"></div>
    <div class="bar"></div>
  </li>
</ul>

CSS

li .bar { display: none; }

JS

// On mouse over, fade out 'foo' and fade in 'bar'
jQuery('.foo').mouseover(function() {
  jQuery(this).fadeOut(function() {
    jQuery('.bar').fadeIn(); <-- This is wrong. I need to get the bar inside this li
});

// On mouse out, fade out 'bar' and fade in 'foo'
jQuery('.bar').blur(function() {
  jQuery(this).fadeOut(function() {
    jQuery('.foo').fadeIn();
});

这是我糟糕的jsFiddle尝试：http://jsfiddle.net/TvCT5/2/

欣赏正确的方向：）

Answer 1

一般设计模式如下。而不是：

jQuery('.bar').fadeIn();

使用此命令查找.bar对象，其中包含触发事件的对象的公共<li>父对象：

jQuery(this).closest("li").find('.bar').fadeIn();

或者因为你的两个项目是兄弟姐妹，你可以更简单地使用它：

jQuery(this).siblings('.bar').fadeIn();

这会找到最近的祖先<li>标记，然后在该祖先中找到.bar对象，该对象将与该事件的触发器匹配。

完整代码如下所示：

// On mouse over, fade out 'foo' and fade in 'bar'
jQuery('.foo').mouseover(function() {
  jQuery(this).fadeOut(function() {
    jQuery(this).siblings('.bar').fadeIn();
});

// On mouse out, fade out 'bar' and fade in 'foo'
jQuery('.bar').blur(function() {
  jQuery(this).fadeOut(function() {
    jQuery(this).siblings('.foo').fadeIn();
});

将.mouseover()与.blur()配对有点不寻常，因为这些配对不匹配，但使用.mouseover()和.mouseout()也可能会有问题，因为您正在隐藏触发.mouseover()。

的对象

Answer 2

这是你正在寻找的效果吗？

<强> jsFiddle example

jQuery的：

jQuery('.foo').mouseover(function(){
    jQuery(this).fadeOut(function(){jQuery(this).siblings().fadeIn();});
});
jQuery('.bar').mouseout(function(){
    jQuery(this).fadeOut(function(){jQuery(this).siblings().fadeIn();});
});

我怎么淡出一个div和FadeIn另一个？

2 个答案: