Hover and click animation

Dev Shed Forums Sponsor:

November 17th, 2012, 01:47 AM

caffeinehigh

Registered User

Join Date: Nov 2012

Posts: 2

Time spent in forums: 1 h 21 m 5 sec
Reputation Power: 0

jQuery - Hover and click animation

I'm trying to create a JQuery function that where by when I hover over the slightly hidden DIV it slides out and then when it's clicked it slides to the middle of the screen.

The function I have created slides in and out perfectly however I can't figure out how to get it to slide to the middle of the screen correctly. Firstly I'm not sure using a px number is the best way to find the middle of the screen and secondly once clicked to the middle of the screen the div still moves around when hovered over as the hover function is still active and needs cancelling somehow.

Any help much appreciated

Code:

jQuery(document).ready(function($) {
			$('div#feedback-form-container').hover(function() {
				 $("div#feedback-form-container").animate({"left": "+=260px"}, "2000");
			},
			
			function() {
			$("div#feedback-form-container").animate({"left": "-=260px"}, "6000");

         }
     );
	 $("div#feedback-form-container").click(function() {
		$("div#feedback-form-container").animate({"left": "+=400px"}, "2000");
	 });
	 
});

November 17th, 2012, 06:41 PM

AndrewSW

JavaScript is not spelt java

Join Date: Feb 2011

Location: Landan, England

Posts: 743

Time spent in forums: 2 Weeks 1 Day 23 h 1 m 13 sec
Reputation Power: 164

Every time hover is triggered it is pushing further to the right (from my brief look at your code), or to the left when not hovered. So it is unlikely to end up where you want it to.

The following may be useful to you:

Code:

if ($('div#feedback-form-container').is(":animated")) return;

which would wait until a current animation is completed.

unbind() can be used to remove a bound event (on() and off() from jQuery 1.7).

Code:

$(window).width();   // returns width of browser viewport
$(document).width(); // returns width of HTML document

You can half this value and subtract half the width of your element to find the correct left position (to put the element at the centre of the screen).

However, I suggest that, before you revise your code, you establish in your own mind what exactly you expect to happen and in what order.

November 19th, 2012, 01:22 AM

caffeinehigh

Registered User

Join Date: Nov 2012

Posts: 2

Time spent in forums: 1 h 21 m 5 sec
Reputation Power: 0

Hi AndrewSW thank you for your help. I've had a good bash at it and I'm almost there. I'm a little stumped at how to bind the hover and click animations back to the container though. Switching them off works but switching them back on again after that doesn't. I don't think I'm using the on() and off() functions you mentioned correctly for unbind() but reading the documentation for a while I still can't figure it out. Here's what I have so far..

Code:

/////////////////////feedback form animation//////////////////////
jQuery(document).ready(function($) {
			//find center of screen
			var $screenwidth = $(window).width();
			var $screencenter = $screenwidth /2 -177;
			var $startpos = $screencenter +260;
			var overlay = jQuery('<div id="simpleoverlay"> </div>');

			//hover to slide functions
			$('div#feedback-form-container').hover(function() {
				 $('div#feedback-form-container').animate({left: '+=260px'}, '2000');
			},
			
			function() {
			$('div#feedback-form-container').animate({left: '-=260px'}, '6000');

         }
     );
		 //click to slide to center of screen
			 $('div#feedback-form-container').click(function() {
				$('div#feedback-form-container').animate({
					left: '+=' + $screencenter},{ 
					duration: '2000', 
					easing: 'swing',
					complete: setTimeout(function() { overlay.appendTo(document.body) }, 500)
					});
					
		//unbind functions
				if ($('div#feedback-form-container').is(':animated')) $('div#feedback-form-container').off('click').off('hover');
		//set cursor back to default
				$('div#feedback-form-container').css('cursor', 'default');
				
	});
		
				$('#wpcf7-f52-t1-o1').submit(function() {
				
				  $('div#feedback-form-container').animate({left: '-=' + $startpos}, '6000');

				  $('div#feedback-form-container').on('hover').on('click');
				});
			 
		 
});

jQuery - Hover and click animation

Developer Shed Advertisers and Affiliates