隐藏10秒钟

Question

我正在做一个小脚本，该元素应该只消失2秒然后返回单独出现，我将链接留在这里小提琴

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $('img').click(function() {
                $(this).fadeOut();
                setTimeout(function() {
                    $(this).fadeIn();

                }, 1000);
                //$(this).toggle();
            });
        });
    </script>

我尝试使用淡入淡出和设置时间但它不起作用

Answer 1

this在$(this).fadeIn(); 不再指向图像了。

尝试这个：

 $(document).ready(function() {
            $('img').click(function() {
                var img = this; /* Store it on variable img */
                $(img).fadeOut();
                setTimeout(function() {
                    $(img).fadeIn(); /* Can access variable img here */
                }, 1000);
                //$(this).toggle();
            });
        });

小提琴： https ： //jsfiddle.net/7rfypomx/1/

Answer 2

$(this)指向窗口，你必须使用$('img').fadeIn(); 使图像再次出现

 $(document).ready(function() {
            $('img').click(function() {
                $(this).fadeOut();
                setTimeout(function() {
                    $('img').fadeIn();

                }, 1000);
                //$(this).toggle();
            });
        });

https://jsfiddle.net/ftf6wr8L/

Answer 3

尝试这样做会有效。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        $('img').click(function() {
            $(this).fadeOut().delay(1000).fadeIn();
        });
    });
</script>

Answer 4

试试这个我也在这里更新：

$(document).ready(function() {
        $('img').click(function() {
            var img = $(this);
            $(this).fadeOut();
            setTimeout(function() {
                img.fadeIn();

            }, 1000);
            //$(this).toggle();
        });
    });

Answer 5

将$(this)分配给变量ex。 var ty = $(this);

并使用下面的行作为faceIn()函数。

$(ty).fadeIn();

此外，我还更新了您现有的小提琴链接。 检查一下

Answer 6

  $(document).ready(function() { $('img').click(function() { $(this).fadeOut(function(){ $(this).fadeIn(15000); }); }); }); 

  table, th, td { border: 1px solid black; } img { width: 25px; height: 25px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <th><img src="img/1.png"></th> <th><img src="img/2.png"></th> </tr> <tr> <th><img src="img/3.jpg"></th> <th><img src="img/4.jpg"></th> </tr> </table>