www.webdeveloper.com
Results 1 to 4 of 4

Thread: JavaScript Animate, Vapour trail.

  1. #1
    Join Date
    Nov 2013
    Posts
    2

    JavaScript Animate, Vapour trail.

    I have a problem with animating a fixed header to change from large to small but leaves a vapour trail behind
    Code:
    <script>
    $(function(){
      $('#fixed').data('size','big');
      $('#logo').data('size','big');
      $('#navigation').data('size','big');
      $('#top').data('size','big');
    });
    
    $(window).scroll(function(){
      if($(document).scrollTop() > 0)
    {
        if($('#fixed').data('size') == 'big')
        {
            $('#fixed').data('size','small');
            $('#fixed').stop().animate({
    	    backgroundColor: "#FF4200",
     	    height:'70px',
    scrollTop:0
            },"fast", 'linear');
        }
        if($('#logo').data('size') == 'big')
        {
            $('#logo').data('size','small');
            $('#logo').stop().animate({
                height:'54.54px',
    	    width:'100px',
    	    backgroundImage: "url()", //linked removed for privacy reasons
    	    marginTop:'-30px'
            },"fast", 'linear');
        }
        if($('#navigation').data('size') == 'big')
        {
            $('#navigation').data('size','small');
            $('#navigation').stop().animate({
                marginTop:'47px'
            },"fast", 'linear');
        }
        if($('#top').data('size') == 'big')
        {
            $('#top').data('size','small');
            $('#top').stop().hide();
        }			
    }
    else
      {
        if($('#fixed').data('size') == 'small')
          {
            $('#fixed').data('size','big');
            $('#fixed').stop().animate({
                backgroundColor: "#ffffff",
    	    height:'150px',
    scrollTop:0
    	    
            },"fast", 'linear');
          }  
        if($('#logo').data('size') == 'small')
          {
            $('#logo').data('size','big');
            $('#logo').stop().animate({
                height:'100%',
    	    width:'100%',
    	    marginTop:'0px'
            },"fast", 'linear');
          }
       if($('#navigation').data('size') == 'small')
          {
            $('#navigation').data('size','big');
            $('#navigation').stop().animate({
                marginTop:'127px'
            },"fast", 'linear');
    if($('#top').data('size') == 'small')
        {
            $('#top').data('size','big');
            $('#top').stop().show();
        }	
          }  
    
      }
    });
    </script>
    Screenshots available:
    Normal view: http://dvelopit.co.nz/normal.PNG
    Transition view: http://dvelopit.co.nz/normal-transition.PNG
    Whats happening when scrolling to fast: http://dvelopit.co.nz/broken.PNG


    Any help would be appreciated.

  2. #2
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,348
    Not JavaScript, thats JQuery.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  3. #3
    Join Date
    Nov 2013
    Posts
    2
    Sorry JQuery, Thanks for correction.

  4. #4
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,348
    Think your problem will be a CSS problem and one you could use JavaScript for setting it up, this is just a guess but you might need to have a setting in CSS for the one image to be "position:absolute;" but don't quote me.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles