logo标签列表

jQuery淡入淡出元素的兄弟节点

jqueryhtmlfadeinfadeout
3
我希望能够使特定的 div（一个特定元素的第一个同级）在鼠标移动到另一个 div 上时淡入并最终淡出。需要淡出的 div 正好位于另一个 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>

需要淡入淡出的元素是class为“clenoveText”的元素，有人知道一些简单的解决方案吗？

哪些元素应该淡入淡出？此外，这里不应使用.next()，并且避免使用内联事件处理程序。 - j08691
你想要在HTML的哪个元素上实现淡入/淡出效果？ - Chanckjh
淡入淡出的元素是具有类名“clenoveText”的元素。 - user3831992
3个回答
0
一个好的方法是使用一个类来表示悬停元素，使用相对选择器来选择兄弟元素：
<img class="hover" src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />

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

演示

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

0

我不确定我是否正确理解了你的意思，但你可以使用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/

这并没有展示出像问题中提到的兄弟关系。 - isherwood
0
你应该给元素添加标识符，以便jQuery可以引用它们。然后在页面加载后添加一个初始化函数来定义你的处理程序。
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>

JS

function init() {
  $( "#page1" ).hover(function() {
    $( "#fade1" ).fadeIn( "slow" )
    $( "#fade2" ).fadeOut( "slow" )
  });
  $( "#page2" ).hover(function() {
    $( "#fade1" ).fadeOut( "slow" )
    $( "#fade2" ).fadeIn( "slow" )
  });
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接