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。$(document).ready(function(){ $(".button").click(function(){ $(this).fadeOut() }); });将提供对调用当前函数的成员的引用。您可以Read more在这里

＆＃13;

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

＆＃13;

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

＆＃13;

使用css的淡出

＆＃13;

.button{
  transition:all .5s linear;
}

.fadeOut{
  opacity:0;
}

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

如何使用Jquery淡出一个按钮

1 个答案: