JQuery淡出和淡出按钮问题

JQuery FadeIn and FadeOut with button issue

本文关键字：淡出 问题 按钮 JQuery      更新时间：2023-09-26

我正在尝试创建一个按钮来显示所有内容。我想要鼠标进入时的淡出，鼠标离开时的淡出。当你点击按钮时，它会禁用淡出，直到再次点击它才会重新启用

这是jsfield: https://jsfiddle.net/uv4bxdxs/16/

<script>
   function Show() { 
    $('#div1h1').fadeIn();
    $('#div2h2').fadeIn();
    $('#div3h3').fadeIn();
}
</script>
<body>
    <button onclick="Show()">Show all</button>
    <div id="div1">
        <h1 id="div1h1">TEKST</h1>
    </div>
    <div id="div2">
        <h1 id="div2h2">TEKST</h1>
    </div>
    <div id="div3">
        <h1 id="div3h3">TEKST</h1>
    </div>
</body>

一个可能的解决方案是为按钮click事件上显示的元素添加一个类。该类的目的是禁用渐入淡出功能。当再次单击按钮时，该类将被移除以重新启用淡出效果。

var flag = true;
$('button').click( function() {
  if (flag) {
    $('#div1h1').fadeIn().addClass('shown');
    flag = false;
  }
  else {
    $('#div1h1').fadeOut().removeClass('shown');
    flag = true;
  }
});

看到演示

请使用此代码:

$(function() {
var showAllFlag = false;
var btnShowAll = $('#show-all');
$('body').on('mouseenter', 'div.info-box', function() {
    showTitle($(this))
}).on('mouseleave', 'div.info-box', function() {
    hideTitle($(this))
});
function showTitle(target) {
    target.find('h1').stop().fadeIn();
}
function hideTitle(target) {
    if (!showAllFlag) {
        target.find('h1').stop().fadeOut();
    }
}
function showAllTitles() {
    $('.info-box h1').show();
    showAllFlag = true;
}
btnShowAll.on('click', showAllTitles);

});

或者跟随这个链接:在这里输入链接描述

把你的函数改成这样:

$(function() {
    $('#div1').hover(function() { 
        $('#div1h1').fadeIn(); 
    });
    });
    $(function() {
    $('#div2').hover(function() { 
        $('#div2h2').fadeIn(); 
    });
    });
    $(function() {
    $('#div3').hover(function() { 
        $('#div3h3').fadeIn(); 
    });
});

假设你只想让H1渐变，并让它们在悬停时保持可见，只需以下代码:

<script>
   function Show() { 
    $('#div1h1').fadeIn();
    $('#div2h2').fadeIn();
    $('#div3h3').fadeIn();
}
</script>
<body>
    <button onclick="Show()">Show all</button>
    <div id="div1">
        <h1 id="div1h1">TEKST</h1>
    </div>
    <div id="div2">
        <h1 id="div2h2">TEKST</h1>
    </div>
    <div id="div3">
        <h1 id="div3h3">TEKST</h1>
    </div>
</body>

您提供的JSFiddle链接有一个额外的JavaScript部分，导致H1在悬停时淡出。

如果它已经可见，就不要触发渐隐?

  $('#div1').not(":visible").hover(function() { 
     $('#div1h1').fadeIn(); 
  },

编辑-不好意思，我没有看到逗号:)，给我点时间

相关文章：