jQuery元素的fadeIn和fadeOut'；兄弟姐妹_Jquery_Html_Fadein_Fadeout

jQuery元素的fadeIn和fadeOut'；兄弟姐妹

jquery html

jQuery元素的fadeIn和fadeOut'；兄弟姐妹,jquery,html,fadein,fadeout,Jquery,Html,Fadein,Fadeout,我想创建一个特定的div（特定元素的第一个同级）fadeIn，并在鼠标移到另一个div上/从另一个div中移出时最终淡出。将要消失的div正好位于另一个div的上方。我成功地使用$（document）.ready（）为一个元素设计了代码，但我想成为更多的淡入淡出的元素，并且我不想一次显示所有元素，所以我不得不修改函数以下是函数代码： function clenShow() { $(this).next().fadeIn(1000); } function clenHide() {

我想创建一个特定的div（特定元素的第一个同级）fadeIn，并在鼠标移到另一个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>

应该淡入淡出的元素是类为“clenoveText”的元素

有人知道一些简单的解决方案吗？

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

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

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


$（'.hover'）.hover（函数（）{
$（this.next（）.fadeOut（）；
}，函数（）{
$（this.next（）.fadeIn（）；
});

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

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

示例：

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

HTML

哪些元素应该淡入淡出？另外，

.next（）

不是您想要在这里使用的，并且避免使用内联事件处理程序。您希望HTML的哪个元素具有fadein/fadeout？fadein和out的元素是具有类“clenoveText”的元素。这不显示问题中提到的兄弟关系。

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

.clenove:hover * {
    opacity: 1;
}

<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" )
  });
}