元素兄弟的jQuery fadeIn和fadeOut答案

【问题标题】：jQuery fadeIn and fadeOut of element's sibling元素兄弟的jQuery fadeIn和fadeOut
【发布时间】：2015-02-02 19:57:20
【问题描述】：

当鼠标悬停/鼠标移出另一个 div 时，我想制作一个特定的 div（特定元素的第一个兄弟）fadeIn 并最终淡出。应该褪色的 div 恰好位于另一个上方。我成功地使用 $(document).ready() 为一个元素设计了代码，但我希望在侧面有更多褪色的元素，我不会一次显示它们，所以我不得不修改函数。

功能代码如下：

function clenShow() {
    $(this).next().fadeIn(1000);
}
function clenHide() {
    $(this).next().fadeOut(1000);
}

这是 HTML：

<a class="clenove" onMouseOver="clenShow()" onMouseOut="clenHide()" href="page1.html" title="">
   <div class="clenovePhoto">
   </div>
   <div class="clenoveText">
      <h2>Head text</h2>
      <p>Content text...</p>
   </div>
</a>
<a class="clenove" onMouseOver="clenShow()" onMouseOut="clenHide()" href="page2.html" title="">
   <div class="clenovePhoto">
   </div>
   <div class="clenoveText">
       <h2>Head text #2</h2>
       <p>Content text #2</p>
   </div>
</a>

应该淡入淡出的元素是类“clenoveText”的元素有人知道一些简单的解决方案吗？

【问题讨论】：

哪些元素应该淡入淡出？此外，.next() 不是您想在此处使用的，请避免使用内联事件处理程序。
你想让 HTML 的哪个元素淡入/淡出？
淡入淡出的元素是类“clenoveText”的元素

标签： jquery html fadein fadeout

【解决方案1】：

一个好的方法是为悬停元素使用一个类，为兄弟元素使用一个相对选择器：

<img class="hover" src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />

$('.hover').hover(function() {
    $(this).next().fadeOut();
}, function() {
    $(this).next().fadeIn();
});

Demo

请注意，以这种方式在您的标记中没有 JavaScript，这是最佳实践。

【讨论】：

【解决方案2】：

我不确定我是否正确理解你，但你可以使用 css3 代替 javascript。

在这里查看：

<a class="clenove" href="page1.html" title="">
   <div class="clenovePhoto">
   </div>
   <div class="clenoveText">
      <h2>Head text</h2>
      <p>Content text...</p>
   </div>
</a>
<a class="clenove" href="page2.html" title="">
   <div class="clenovePhoto">
   </div>
   <div class="clenoveText">
       <h2>Head text #2</h2>
       <p>Content text #2</p>
   </div>
</a>

css:

.clenove * {
    opacity: 0;
    transition: opacity 1s;
}

.clenove:hover * {
    opacity: 1;
}

示例：http://jsfiddle.net/DariuszMusielak/vv2knmxa/

【讨论】：

这并没有像问题中提到的那样显示兄弟关系。

【解决方案3】：

您应该为 jQuery 引用的元素提供标识符。然后在定义处理程序的主体加载后添加一个 init 函数。

HTML

<body onload="init()">
  <a class="clenove" id="page1" href="page1.html" title="">
    <div class="clenovePhoto">
      <img src="http://placehold.it/100x100" />
    </div>
    <div class="clenoveText" id="fade1">
      <h2>Head text</h2>
      <p>Content text...</p>
    </div>
  </a>
  <a class="clenove" id="page2" href="page2.html" title="">
    <div class="clenovePhoto">
      <img src="http://placehold.it/100x100" />
    </div>
    <div class="clenoveText" id="fade2">
      <h2>Head text #2</h2>
      <p>Content text #2</p>
    </div>
  </a>
</body>

function init() {
  $( "#page1" ).hover(function() {
    $( "#fade1" ).fadeIn( "slow" )
    $( "#fade2" ).fadeOut( "slow" )
  });
  $( "#page2" ).hover(function() {
    $( "#fade1" ).fadeOut( "slow" )
    $( "#fade2" ).fadeIn( "slow" )
  });
}

【讨论】：