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

in PHP

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 :

Classic St Cheap Jerseys free shipping. Louis Rams Double-Sided 28” x 40” Banner, wholesale nfl jerseys from china,Women’s San Francisco 49ers Pink Flip Flops, cheap jerseys, wholesale jerseys from china,Womens Pittsburgh Steelers ‘47 Brand Black Primetime Hooded Long Sleeve T-Shirt, wholesale jerseys

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;
} {
	height: 200px;
	width: 580px;
	border: 1px solid #ccc;
	border-top: none;
	background-color: #FFFFFF;
} {
	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 :


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

var $this, position, selected;
$this = $(this);

'); // 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
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"
$('div#animate').remove(); // remove div with id "animate"




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>

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. Auto Load Page content every X second using Jquery
  3. Remove data in a div after successfully deleted using Jquery
  4. Check if a file exists using PHP
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


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:


Tyler Graham July 19, 2011 at 4:24 am

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


Rain July 31, 2011 at 4:56 pm

Demo not working :(


Hyder August 1, 2011 at 1:17 am

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


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?


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.


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 .


Marcus August 18, 2011 at 8:42 pm

Got it. Nifty, thanks for sharing!


meysam August 20, 2012 at 7:19 pm



Leave a Comment

Previous post:

Next post: