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

jquery

#1

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!


#2

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

http://api.jquery.com/fadeout/
https://api.jquery.com/delay/

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

$(elementToFade).fadeOut().delay()

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


#3

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


#4

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:
https://jsfiddle.net/9wzvn7o9/14/

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


#5

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>

#6

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


#7

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