如何使用 Jquery 淡出一个按钮

Question

我有一排按钮：

 <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>

我正在尝试制作一个程序，如果您单击其中一个按钮，它只会淡出您单击的按钮。我有以下 Jquery：

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

Answer 1

使用$(this).this将引用调用当前function.You的成员可以Read more这里

 $(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:

淡出使用 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>

如何使用 Jquery 淡出一个按钮

How to fade out just one button with Jquery

html

javascript

css

jquery

fadeout