JQuery FadeIn和FadeOut按钮问题

我正在尝试创建一个按钮来显示所有内容。我想在鼠标上输入一个淡入淡出效果，在鼠标淡入淡出效果。当您单击按钮，它禁用淡出，直到再次单击并重新启用它JQuery FadeIn和FadeOut按钮问题

这里是的jsfiddle：在advanse 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>

感谢

来源

2015-10-20 Lucas

那你想要什么？ –

你好，我想创建一个按钮，将保持所有H1的FadIn。所以当你点击这个按钮时，你可以将鼠标悬停在所有div上，而H1将保持FadedIn。我很抱歉英语很糟糕。总结一下 – Lucas

，你想在鼠标上输入fadein，在mouseleave上输出fadein。点击后会禁用淡出功能，直到再次单击并重新启用它为止？ –

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

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

见DEMO

来源

2015-10-20 15:12:15 MaxZoom

这可能是最简单的方法。 –

谢谢你们！真的很感激它。：d – Lucas

只要不触发如果它已经可见，淡入淡出？

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

~~编辑 - 我的坏我没有看到逗号:)，给我第二~~

来源

2015-10-20 13:59:43

非常感谢！我是Jquery和Javascript的新手，所以这可能是一个noobie问题：P。谢谢Agian。 – Lucas

你确定那是你想要的？它将完全禁用淡出...... –

我想在鼠标输入时使用淡入淡出效果，在鼠标淡入淡出效果。当您单击该按钮时，将禁用淡出功能，直到再次单击并重新启用它为止。我不知道该怎么做。你能帮我吗？ :) – Lucas

改变你的函数是：

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

来源

2015-10-20 14:02:44 Vingtoft

谢谢！乔希哈里森的解决方案也工作。 – Lucas

假设你只想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在悬停时淡出。

来源

2015-10-20 14:08:24 Griffith

请使用此代码：

$(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);

}）;

或本链接如下：enter link description here

来源

2015-10-20 14:18:33

感谢您的回复。它的作品，但现在我想要一个淡入淡出鼠标输入，淡出鼠标叶。当您单击该按钮时，将禁用淡出功能，直到再次单击并重新启用它为止。我不知道该怎么做。你能帮我吗？ :) – Lucas

我更新了它https://jsfiddle.net/uv4bxdxs/26/ –

JQuery FadeIn和FadeOut按钮问题

回答

相关问题