CODEWITHSUNDEEP
javascriptjqueryhtmlcssonclick
insignia
insignia

Reputation: 51

How to make an element appear then disappear on click

I have been trying to make a random image appear on click by adding a fadeOut effect and then removing the class. when I click it works fine, but I don't know how to remove the class after a few milliseconds and then being able to appear again on another click. so far I have just been able to make it fade out on click, I have tried a setInterval function so that the class gets removed after 1 millisecond but didn't work so I erased it, but even then, I don't know how to make the .on('click', function()) function fire on every click, instead of just working once. any help or tips would be really appreciated. Thanks!

<style>
body {
  background-color: black;
}

img {
  opacity: 0;
  width: 40px;
  z-index: 0;
  position: relative;
  top: 3em;
}

</style>    

<img class="red" 
src="http://www.clker.com/cliparts/0/f/1/f/130267960774173786paint- 
splash(red)-md.png" alt="">

<img class="blue" src="http://www.clker.com/cliparts/Q/3/H/u/Z/K/dark-blue- 
splash-ink-hi.png" alt="">

<img class="yellow" src="http://www.clker.com/cliparts/3/y/m/m/p/P/yellow- 
splash-ink-md.png" alt="">

<script>
$(document).ready(function(){
 var red = $(".red");
 var blue = $(".blue");
 var yellow = $(".yellow");
 var images = [red, blue, yellow];

 $(document).on('click', function(){
 $(images[(Math.floor(Math.random()*3))]).addClass("animated fadeOut");
 });
})
//i should be able to click anywhere on the screen and a random image should appear and then fadeout each time there is a click
</script>

Upvotes: 2

Views: 2619

Answers (4)

Sijan Bhattarai
Sijan Bhattarai

Reputation: 650

If I understood the question correct, In This Fiddle the button element disappears when you click anywhere in the screen and then re appears immediately. Hope this will work.

    $(document).ready(function(){
       $(document).on('click',function(){
         $("#myElement").fadeOut().delay(100).fadeIn();
       });
   });

Upvotes: 0

poorly-written-code
poorly-written-code

Reputation: 1073

Both .fadeOut() and .hide() set display: none, which could effect your layout. I think you're looking to animate opacity to 0, and then in the callback function you can change the image source. I'd recommend using a div and setting the background-image property since divs are a bit more layout friendly. Also, you could either use classes and set the background-image property in the <style> section or you can make an array of the image urls and randomly pick from that (which is what I did here).

let images = [
'http://www.clker.com/cliparts/0/f/1/f/130267960774173786paint-splash(red)-md.png',
'http://www.clker.com/cliparts/Q/3/H/u/Z/K/dark-blue-splash-ink-hi.png',
'http://www.clker.com/cliparts/3/y/m/m/p/P/yellow-splash-ink-md.png'
];

$(document).on('click', function() {
  let $img = $('.img'); //so you don't have to make a new object everytime it's used

  if ($img.css('opacity') === '1') {
    $img.animate({ opacity: 0 }, function() { 
      $img.css('background-image', `url(${images[Math.floor(Math.random()*3)]})`); 
    });    
  } else {
    $img.animate({ opacity: 1 });
  }
}).click().click(); //two clicks to initialize image

https://jsfiddle.net/yc4e4nxb/3/

NOTE: JSfiddle doesn't seem to like wherever these images are hosted, so it's working kind of erratically. Hopefully you get the gist of what this code is doing though.

http://api.jquery.com/animate/

Upvotes: 0

Acorn
Acorn

Reputation: 26146

Try something like this:

$(document).on("click", function() {
  $("#element").show(0, function() {
    $("#element").fadeOut();
  });
});
$("#element").hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="element">Element</span>

Upvotes: 1

Sigma VX
Sigma VX

Reputation: 426

It looks like you are using jQuery so you simply need to:

1) Create a function that hides the class. Example:

function hideStuff(){
  $(".myimg").hide();
}

2) Add a class to your image files so they have a common selector (like "myimg" below). You may also want to add an "alt" attribute (was missing in your code). Example:

<img class="yellow myimg" src="http://www.clker.com/stuff" alt="image-three">

3) Add the timeout as part of your function with the amount of delay you want. While it is not required, you should include a variable name so you can call it in the future. Example:

var myTimeout = setTimeout( hideStuff, 5000);

Hopefully these will get you going in the right direction.

Upvotes: 1

Related Questions