CODEWITHSUNDEEP
javascriptjquery
Lucas
Lucas

Reputation: 35

JQuery FadeIn and FadeOut with button issue

I am trying to create a button to show all content. I want a fadein on mouse enter, fadeout on mouseleave. when you click the button it disables the fade out, until clicked again and that re-enables it

Here is the Jsfiddle: 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>

Upvotes: 2

Views: 399

Answers (5)

MaxZoom
MaxZoom

Reputation: 7763

One possible solution would be to add a class to displayed elements on the button click event. The class purpose is to disable the fade-in-out functionality. When the button is clicked again that class is removed to re-enable fade-in-out effect.

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

See DEMO

Upvotes: 2

Andrii Gordiichuk
Andrii Gordiichuk

Reputation: 1929

Please use this code:

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

});

Or follow by this link: enter link description here

Upvotes: 1

Josh Harrison
Josh Harrison

Reputation: 121

Just don't trigger the fadein if its already visible?

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

edit - My bad i didn't see that comma :), gimme a second

Upvotes: 0

Griffith
Griffith

Reputation: 3217

Assuming that you just want the H1 to fade in and for them to stay visible on hover, just have the following code:

<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>

The JSFiddle link you provided has an extra JavaScript section which is causing the H1 to fade out on hover.

Upvotes: 0

Vingtoft
Vingtoft

Reputation: 14616

Change your function to this:

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

Upvotes: 0

Related Questions