Toggle image using jquery for animated hide show in asp-net

Web masters find it attractive to mark or indicate some text in a page as special part. For example a featured product in a shopping cart would hold a finished featured icon image at its side. Similarly we see New image icon blinking at the side of some product or text. It is sometimes better by far to use such animated images to draw user's attention. How would you do this using jquery? The simple answer is that- toggle the image based on its display status, in a regular interval.

There exists a simple method in jquery plugin that accomplished this task:

$('my-image-selector').toggle();

Let's look at the simple example.

<table>
            <tr>
                <td>This is some test news.</td>
                <td style="height:45px"><img id="newImage" src="../images/new.jpg"
                 alt="New!" height="40px" width="40px"/></td>
            </tr>
        </table>

<script type="text/javascript">
        $(function(){
            setInterval(imageFlickr,300);                        
        });
        
        function imageFlickr()
        {
            $("#newImage").toggle(200);            
        }       
    </script>

 

In the page, I have added an image in a column of a table. Please use your own image (perhaps some 'New' image, as in the image above). Note the javascript setInterval() method that calls the function imageFlickr() every 300ms. In the method, we have the line:

$("#newImage").toggle();

The $(selector).toggle(interval) method toggles the show/hide property of the element. In the code, I haven't used the interval argument of toggle method. The interval in milliseconds defines the fade-in or fade-out speed of the element. Try this once and you will see great effect:

$("#newImage").toggle(200);

You are warmly welcome to share your experiences. You can start discussion by adding comments from the form below. You can help spreading out the words by bookmarking this article to
any of your favourite bookmarking site!

Happy Programming!