I want to create a flashing effect. When user click the flashing element, it will be disappeared. However, it seems not every "user's click" can fire the "click event". Sometimes, when I clicked the flashing element, it didn't disappear. I thought the reason is a hidden element can not be clicked. Just like this article says CSS: Is a hidden object clickable?. So, is there other methods to make the flashing element disappeared immediately when user clicks the element?

var flashToggle = setInterval(function() {
  $("div").toggle();
}, 200)

$("div").on("click", function(e) {
  clearInterval(flashToggle);
  $(this).hide();
})

<script src=".1.1/jquery.min.js"></script>

<div>Flashing element</div>

I want to create a flashing effect. When user click the flashing element, it will be disappeared. However, it seems not every "user's click" can fire the "click event". Sometimes, when I clicked the flashing element, it didn't disappear. I thought the reason is a hidden element can not be clicked. Just like this article says CSS: Is a hidden object clickable?. So, is there other methods to make the flashing element disappeared immediately when user clicks the element?

var flashToggle = setInterval(function() {
  $("div").toggle();
}, 200)

$("div").on("click", function(e) {
  clearInterval(flashToggle);
  $(this).hide();
})

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>Flashing element</div>

• javascript
• jquery
• css
• visibility
• display

5 Answers 5

Put the flashing element inside another element, and put the handler on that parent element. Also, you might change the visibility property of the flashing element, not the display of the flashing element, so that it doesn't change the layout of your page every time it appears or disappears.

const child = $('#child');
let visible = true;
var flashToggle = setInterval(function() {
  visible = !visible;
  child.css('visibility',
    visible
    ? 'visible'
    : 'hidden'
  );
}, 500)

$("#container").on("click", function(e) {
  clearInterval(flashToggle);
  $(this).hide();
})

div {
  background-color: yellow;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container">
  <div id="child">Flashing element</div>
</div>

Yes, hidden/toggle will hide elements by setting the css display. When hidden, elements can not receive clicks. You can try the following:

1. Use .css('visibility','hidden|visible') instead. This is remended as it does not have the side effect of changing container size and causing jiggling of other elements.

2. Wrap your flashing element inside a container element, register the click on the container element instead.

Try to use opacity : 0|1 instead of display: none / visibility: hidden. On click event on opacity: 0 worked for me. It worked for me.

$(this).hide(); ---> $("div").hide();

I think this might be what you're looking for: $("my-element").click()