#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    2
    Rep Power
    0

    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");
    	 });
    	 
    });
  2. #2
  3. JavaScript is not spelt java
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2011
    Location
    Landan, England
    Posts
    743
    Rep Power
    165
    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.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    2
    Rep 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');
    				});
    			 
    		 
    });

IMN logo majestic logo threadwatch logo seochat tools logo