4

I'm doing a small script which the element should disappear for only 2 seconds and then return to appear alone, I leave the link here 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>

im trying using fade and set time but it not works

4
  • jsfiddle.net/satpalsingh/2adLb0ro
    – Satpal
    Commented Jan 16, 2018 at 9:35
  • When you use javascript scheduling function like setTimeout or setInterval with 'this' it is always refer window object.
    – Hanif
    Commented Jan 16, 2018 at 9:39
  • Do you mean, on click fadeOut all images then fadeIn the image you clicked? Commented Jan 16, 2018 at 9:42
  • Am I missing something or why is the time different in title and text?
    – Jimmy T.
    Commented Jan 16, 2018 at 10:17

6 Answers 6

3

The this on $(this).fadeIn(); does not point to the image anymore.

Try this:

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

Fiddle: https://jsfiddle.net/7rfypomx/1/

0
2

$(this) refer to the window, you have to use $('img').fadeIn(); to make the image appearing again

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

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

https://jsfiddle.net/ftf6wr8L/

2

Try doing this it will work.

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

Try this I also updated here:

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

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

Assign $(this) into a variable ex. var ty = $(this);

and use below line for faceIn() function.

$(ty).fadeIn();

Also I have updated in your existing fiddle link as well. Check Here

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.