PDA

View Full Version : Jquery Flip Image - Can't work it out


cocoonfx
02-16-2012, 04:21 PM
Hi Guys

I am using something similar to the below URL. I however want to change some of the functionality and not so good with JQuery I can not work out how to do what I want.

http://www.test-cocoonfxmedia.co.uk/demo/demo.php

So what I want to happen is on the mouse over I want the image to flip. Then stay flipped then when you click it will take you through to a URL. when you mouse out it flips back. Any suggestions?

$(document).ready(function(){
/* The following code is executed once the DOM is loaded */

$('.sponsorFlip').bind("click",function(){

// $(this) point to the clicked .sponsorFlip element (caching it in elem for speed):

var elem = $(this);

// data('flipped') is a flag we set when we flip the element:

if(elem.data('flipped'))
{
// If the element has already been flipped, use the revertFlip method
// defined by the plug-in to revert to the default state automatically:

elem.revertFlip();

// Unsetting the flag:
elem.data('flipped',false)
}
else
{
// Using the flip method defined by the plugin:

elem.flip({
direction:'lr',
speed: 350,
onBefore: function(){
// Insert the contents of the .sponsorData div (hidden from view with display:none)
// into the clicked .sponsorFlip div before the flipping animation starts:

elem.html(elem.siblings('.sponsorData').html());
}
});

// Setting the flag:
elem.data('flipped',true);
}
});

});

ranjan
02-17-2012, 09:45 PM
http://www.zachstronaut.com/projects/rotate3di/