Friday, December 18, 2009

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!

kick it on DotNetKicks.com

3 comments:

Anonymous said...

Excellent idea. I found it very useful.

Thank you.

Anonymous said...

I copied same code to my asp.net web application page.And changed image to an image within my folder.Text and image appears but image wont bling.I think its because the function to bling is not called anywhere in the code u given.Can we trigger this function to blink from code page itself, without writing it in an onclick function.

Unknown said...

Hi. The blinking is accomplished by the toggle function.

Post a Comment

Hope you liked this post. You can leave your message or you can put your valuable suggestions on this post here. Thanks for the sharing and cooperation!

Popular Posts

Recent Articles