dcsimg
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,591
    Not JavaScript, thats JQuery.
    If your post falls off the page, bump it. ...
    Please remember to wrap any code you have in forum tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

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

  4. #4
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,591
    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.
    If your post falls off the page, bump it. ...
    Please remember to wrap any code you have in forum tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

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