Learn how to use jQuery at the Blog

David DeSandro « visit

  • Added 7 months ago
  • 76 Lines of Code shown
  • 2 Links of Interest
http://desandro.com
This is my Source Code and I don't want to show it here
View Source Code only (as overlay)
// That code snippet belongs to David DeSandro - http://desandro.com

$(document).ready(function(){
	//jquery check
//	$("body").append("<p>jQuery working<\/p>");

	//tab animation
	$('#masthead nav a').each(function(i) {
		var xpos = i * -240 + "px ";
		if ( !$(this).hasClass('selected') ) {
			$(this).css({
				backgroundColor: "transparent",
				backgroundPosition: xpos + "50px"
			})
			.mouseover(function(){
				$(this).stop().animate({backgroundPosition:"(" + xpos + "-250px)"}, {duration: 700})
			})
			.mouseout(function(){
				$(this).stop().animate({backgroundPosition:"(" + xpos + "-300px)"}, {duration: 350, 
					complete:function(){ $(this).css({backgroundPosition: xpos + "50px"})
					}})
			});
		} else {
			$(this).mouseover(function(){
					$(this).stop().animate({backgroundPosition:"(" + xpos + "50px)"}, {duration: 1})
						.animate({backgroundPosition:"(" + xpos + "-250px)"}, {duration: 700})
					})		
		}
	});

	//why/here's why
	$('.why').css({
			position: 'relative',
			padding: '1px 3px',
			background: '#222',
			background: 'rgba(0,0,0,.2)',
			color: '#EE6',
			'-moz-border-radius': '4px',
			'-webkit-border-radius': '4px',
			'border-radius': '4px',
			cursor: 'pointer'
		})
		.hover(function() {
			$(this).children('.hereswhy:not(:animated)').animate({opacity: 'show', bottom: 20 }, 400);
		} , function() {
			$(this).children('.hereswhy').animate({opacity: 'hide', bottom: 35 }, 400).animate({ bottom: 5 }, 1);
		})
	;
	$('.hereswhy').css({
		background: '#222',
		color: '#EEE',
		display: 'block',
		width: 200,
		position: 'absolute',
		'-moz-border-radius': '4px',
		'-webkit-border-radius': '4px',
		'border-radius': '4px',
		left: 0,
		bottom: 0,
		padding: 10	
	}).hide();	

});


//masonry layout	
$(document, 'img').ready(function(){
	if(typeof $.fn.masonry == 'function') { //checks if masonry is a legit function
		//apply masonry layout to elements with a class of 'masonry'
		$('.masonry').masonry();

		//handles any in page anchor links, since masonry.js uses absolute positioning
		// from http://blog.position-absolute.com/javascript-jquery/the-end-of-the-html-anchor-scroll-the-scroll/
		var dest = document.location.hash;
		if ( dest ) { var destination = $(dest).offset().top;	}
		$("html:not(:animated), body:not(:animated)").scrollTop( destination - 10 );
	} 
});