Post image for Google Plus Click Animation effect on Stream Page using Jquery

Google Plus Click Animation effect on Stream Page using Jquery

by Hyder on July 12, 2011

in Jquery

Google Plus is now all over the web and that kick-ass user interface with no ads or stupid game is now threatening facebook directly.If you are a Jquery fan boy then you must have been wondering how to reproduce some of the awesome effects/features of Google Plus like me ! After some trial and error i have been able to reproduce the GPlus effect when you click on a post from your stream ( similar to facebook wall ) .

Comments are added inline below :


CSS Code :

body {
    color: #333333;
    font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
    font-size: 11px;
}

a, a:visited, a:hover {
    color: #54A6DE;
    outline: medium none;
    text-decoration: none;
}

div#content {
	margin: 200px auto;
	width: 581px;
	position: relative;
	border-bottom: 1px solid #DDDDDD;
	border-left: 1px solid #DDDDDD;
	border-right: 1px solid #DDDDDD;
	border-top: 1px solid #DDDDDD;
}
div.post {
	height: 200px;
	width: 580px;
	border: 1px solid #ccc;
	border-top: none;
	background-color: #FFFFFF;
}
div.post.selected {
	border-bottom: 1px solid #DDDDDD;
	border-left: 1px solid #4D90F0;
	border-top: 1px solid #DDDDDD;
}
div#animate {
	border: 1px solid #4D90F0;
	border-top: none;
	border-right: none;
	border-bottom: none;
	position: absolute;
}

Jquery Code :

[/js]

$(document).ready(function () {// when dom is ready ( page load completed )
$('div.post').click(function (e) { // detect if user clicked in div with id = post

var $this, position, selected;
$this = $(this);
$this.parent().append('

'); // add this div to the parent div id = content
selected = $this.parent().find('.selected'); // find a div with class name =selected in parent div content

// get the current position of selected div element ( div with class = post )relative to div content
position = selected.position();

position.height = selected.height();

$('div#animate').css(position); // set style to this div , initially top: 0px; left: 0px; height: 200px;
// selected.removeClass('selected');  need to remove permanently
$('div#animate').animate({
left: $this.position().left,
top: $this.position().top,
height: $this.height()
}, {
duration: 400, // duration to animate in millisecond
complete: function () {
selected.removeClass('selected'); // remove div with class name "selected"
$this.addClass('selected');
$('div#animate').remove(); // remove div with id "animate"
}
});

});

});

[js]

The HTML Part :

<div id="content">
  <div class="post selected"></div>
  <div style="height: 50px;" class="post"></div>
  <div class="post"></div>
  <div style="height: 100px;" class="post"></div>
</div>

Cool effect ! isn’t it ? let me know in the comment section below what you think about this :)

Update 15 July 2011 :
Don’t forget to check out my Google Plus Photo stack animation using Jquery and CSS3 Tutorial

Credits :
Google Plus Icon was taken from chethstudios

Related Posts

  1. Google Plus Photo stack animation using Jquery and CSS3
  2. Facebook and Google Plus style of introducing new features using jQuery
  3. Create an Apple Itunes-like banner rotator/slideshow with jQuery
  4. Auto Load Page content every X second using Jquery
  5. Designing a form using pure CSS enhanced with Jquery
After Post

{ 10 comments… read them below or add one }

linesh Jose July 13, 2011 at 11:53 pm

This is a cool tutorial. Thanks for sharing. I’m Expecting more

Reply

Danny G July 18, 2011 at 11:19 pm

Great ideas thanks, gives me something to play with. Anothe idea is to hide the button to prevent double clicks taking the +1 away: http://www.odditysoftware.com/blog/trap-and-track-google-plus-button-click-events_45.html

Reply

Tyler Graham July 19, 2011 at 4:24 am

been trying to figure this out all night…thanks a lot

Reply

Rain July 31, 2011 at 4:56 pm

Demo not working :(

Reply

Hyder August 1, 2011 at 1:17 am

it’s working perfectly here . whats wrong on your side ?

Reply

Robin August 8, 2011 at 8:09 pm

This is awesome! I have one question though. How can I get this to work when no post is selected at start position?

Reply

Marcus August 18, 2011 at 5:39 pm

Not working for me either, tried with both the latest version of FireFox and the latest version of IE.

Reply

Hyder August 18, 2011 at 6:39 pm

Click inside of the boxes to see the effect . i have retried again , it worked on chrome , internet explorer and firefox .

Reply

Marcus August 18, 2011 at 8:42 pm

Got it. Nifty, thanks for sharing!

Reply

meysam August 20, 2012 at 7:19 pm

Thanks

Reply

Leave a Comment

Previous post:

Next post: