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按鈕問題

回答

相關問題