How to fade out just one button with Jquery

Question

I have a row of buttons:

 <div class="console_row1">
            <button class="button">TOFU</button>
            <button class="button">BEANS</button>
            <button class="button">RICE</button>
            <button class="button">PASTA</button>
            <button class="button">QUINOA</button>
            <button class="button">SOY MILK</button>
</div>

And I'm trying to make a program where if you click on one of the buttons, it ONLY fades out the button you clicked on. I have the following Jquery:

 $(document).ready(function(){
            $(".button").click(function(){
                $(".button").fadeOut()    
            });    
        });

XYZ · Accepted Answer · 2017-06-08T15:21:16.397

Use $(this).this will give the reference to the member that invokes the current function.You can Read more here

 $(document).ready(function(){
            $(".button").click(function(){
                $(this).fadeOut()    
            });    
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="console_row1">
            <button class="button">TOFU</button>
            <button class="button">BEANS</button>
            <button class="button">RICE</button>
            <button class="button">PASTA</button>
            <button class="button">QUINOA</button>
            <button class="button">SOY MILK</button>
</div>
And I'm trying to make a program where if you click on one of the buttons, it ONLY fades out the button you clicked on. I have the following Jquery:

For fadeout using css

 $(document).ready(function(){
                $(".button").click(function(){
                    $(this).addClass('fadeOut')    
                });    
            });

.button{
  transition:all .5s linear;
}

.fadeOut{
  opacity:0;
}

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="console_row1">
                <button class="button">TOFU</button>
                <button class="button">BEANS</button>
                <button class="button">RICE</button>
                <button class="button">PASTA</button>
                <button class="button">QUINOA</button>
                <button class="button">SOY MILK</button>
    </div>

Awesome thanks! It worked. Now how do I stop the other buttons from moving after one fades out? — Ahmed Panju, Jun 08 '17 at 15:18
@AhmedPanju You can achieve that simply using css insteadof fadeOut.Added a second snippet.Please check that — XYZ, Jun 08 '17 at 15:21
Thank you so much, that helped a lot. I'm still starting out and stuff haha — Ahmed Panju, Jun 08 '17 at 15:23

How to fade out just one button with Jquery

1 Answers1