Question

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

    <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

试试这个我还更新了here：

$(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();

此外，我还更新了您现有的小提琴链接。 Check Here

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>

隐藏10秒钟

6 个答案: