I'm trying to create a jQuery function to fade out any specific element that the user clicks on within the webpage.
I have tried using the universal selector to target all the elements, but then when I click an element every single element on the page fades away. Im trying to fade away only the clicked element and the rest of the page stays.
I was thinking of adding and event listener to all elements of the page and then removing the parent node of the clicked element?
Here is my code so far:
$("*").click(function () {
$("*").fadeOut(3000);
});
So yeah that's the function I've created already.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Ikigai</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="restaurant.js" type="text/javascript"></script>
<link rel="stylesheet" href="restaurant.css" />
<style>
@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100&display=swap");
</style>
</head>
<body>
<img
class="background"
class="fade"
src="restaurant.jpg"
style="display: none"
/>
<h1 class="heading" class="fade">Ikigai</h1>
<div class="container">
<h1 class="story" class="fade">Our Story</h1>
<p class="story-p" class="fade">TEST</p>
<img
class="storyPic"
class="fade"
src="/pexels-kaboompics-com-6267.jpg"
/>
<h1 class="food" class="fade">Our Food</h1>
<p class="food-p" class="fade">TEST</p>
<img class="foodPic" class="fade" src="/pexels-huy-phan-1409050.jpg" />
<h1 class="people" class="fade">Our People</h1>
<p class="people-p" class="fade">TEST</p>
<img class="peoplePic" class="fade" src="/pexels-cottonbro-4253300.jpg" />
</div>
</body>
</html>
Above is the html Im looking to manipulate!
Any ideas ?
Thanks
You can change a few things to make your code work
.on() to bind click function to all elements (Difference between .on('click') vs .click()) Not mandatory but a good practice$(this) to target clicked elemente.stopPropagation(); to prevent event bubblingWorking code below
(Click on any item) [if you click on page area, the whole page would fade, so try to click on elements to see the effect)
$("*").on('click', function(e) {
e.stopPropagation();
$(this).fadeOut(1000);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>I am a Div</div>
<ul>
<li> list 1 </li>
<li> list 1 </li>
</ul>You can use $(this) to refer to the item that was clicked, so it could become:
$(this).parent().fadeOut(3000)
You will have to target the element clicked. Because the click event propagates which results in the event handler for each element being executed. Event Propagation
So to achieve what you want you will have to stop the event from propagating. Below is a working sample of this.
// thi statement attaches a click event hadler with every element
$("*").click(function($event) {
// below statement stops the event from propagation
$event.stopPropagation();
// below statement fades the clicked element out
$(this).fadeOut(3000);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div> first div</div>
<div> second div</div>
<div> third div</div>
<div> fourth div</div>