Auto Image Slideshow Using jQuery

This is a simple slideshow using jquery. Here we used the fade in fade out effect in Jquery.
Its just a 2-3 line code using jquery as compare to Javascript tradional code.
Here what we used

<script>
$(document).ready(function()
{
	$('.img:gt(0)').hide();
	setInterval(function() {
		$(".img:first-child").fadeOut(3000).next(".img").fadeIn(3000).end().appendTo("#show-case")
}, 4000);
      
});
</script>

The complete HTML,CSS & Jquery code is here [click on read more]
Read more of this post

Advertisements

Sliding Tab Using jQuery

Sliding Tab using jQuery

Necessity of space [ in display area] leads us to use new techniques.  So as to minimize the space in short space utilization we are using a tab which on click [ You can use Mouseover/Out Function too ] Maximize and Minimize the other tabs.  Also it’s a  6-7 line Jquery code we used for sliding purpose.
Here it looks like:

Sliding tab – When Load

Sliding Tab – On Click Event

Here is the jQuery code for sliding tab..

$(".all_block").click(function() {
	$(this).animate({width:650},"slow");
	$(this).prevAll("div").animate({width:50},"slow");
	$(this).nextAll("div").animate({width:50},"slow");});
/* Code For Reset All */
$("#reset_").click(function() {
	$("#container").children("div").animate({width:200},"slow");});

For Complete Source click on Read More

Read more of this post

Animated Tooltip Using jQuery

Login Form

Its another tooltip sourcecode using jQuery. You can copy paste the sourcecode from here. It is a span based tooltip, with animation. The Jquery effects used here are as..

$(".tbox").focusin(function() {

	$(this).next("span").show(1000);

});
$(".tbox").focusout(function() {

	$(this).next("span").hide(1000);

});

Read more of this post

%d bloggers like this: