FadeOut html <button> output in <div id="x">



I hope this is in the right section

I’m a newbie to everything HTML/development-wise so please bear with me while I try to explain what I’m trying to do :slight_smile:

I have a page with a div class=“options”, in options I have a html button to roll a dice. This dice button references a JavaScript function a friend helped me work through, outputting to a separate div class=“player1”.

What I would like to do is have the output of the dice roll button fade out after 4 seconds.

I’ve been trying to mash together JQuery to reference the button being activated and (or at least…) then affect the resulting output, but I am honestly really not understanding how to structure the JQuery language and also am not sure if I need to import anything.

I was really hoping for a bit of a quick solution as I intended for this to be a small project, which would be a brief intro to HTML/CSS and JavaScript. If it helps clear anything up, the project is a 2 player or 4 player Magic The Gathering life counter with a dice roll feature (so 2 outputs on one page, on the other it has 4 outputs - to determine starting player)

If there’s anything I need to elaborate on, please let me know!


looking at the jquery docs, there is a fadeout and delay function:


so all you need to do, is make a click event, then use fadeout + delay:


that is it, its super easy to do with jquery, JS is a bit more challenging.


its the wrong way around, the delay should be first before the element fades out


Thanks Stetim, slowly getting my head around it but still no luck getting this to work yet…

I’ve got a JSFiddle if someone can have a poke through it:

The bottom demo on http://api.jquery.com/fadeout/ seems to be the closest thing to what I’m after, however there isn’t an existing html element in my code to apply it to - its the output of a JS function


I have it working: https://jsfiddle.net/9wzvn7o9/19/

My issues now are:

  1. Pressing the button does not return the value again after the first press (element is completed faded out I guess?)

  2. How do I load jquery locally along with JavaScript?

> <script src="jquery-3.2.1.min.js"></script>
> <script type="text/javascript">
> .......
> </script>


why do you have both a onclick attribute and .click event? its confusing.

yes, so you would have to use fadeIn to make it show again

Jquery is just a JS file, you can download it from there website

fadeOut can have a string or integer value, so it should be 'slow' (string), you used a undefined variable


This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.