Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #13154

    Getting further with my Flash Light modifications and decided I don’t like the sliding transition for the particular website I’m working on.

    These transitions are used on a page that has a full screen background slideshow, such as the homepage of the demo:

    http://www.kriesi.at/themes/flashlight/

    During this transition the sidebar and content of the page are animated to “slide” off the left of the screen in a rapid movement.

    Rather than this, I’d prefer that these elements “fade out”. In addition, I’d like to keep the pixel overlay (since I’m using lower resolution images as my background images for quicker loading times).

    I’ve gotten half way there (getting them to fade out). The issue is I can’t figure out how to have them fade back in!

    Here’s how I got them to fade out below, I’m hoping that someone else can help me get them fading back in properly.

    The functions I needed to edit are in the /flashlight/js/avia_fullscreen_slider.js file

    In this file I found some minimized JS code, and then a function below.

    On line 125 I see the beginning of the hideContent function.

    On lines 141 and 142 I see:

    sidebar1.animate(animateThis, duration, transition1);

    main_mini.animate(animateThis2, duration, transition1, function(){ main_mini.css({zIndex:0}); });

    I changed both of these to :

    sidebar1.fadeOut();

    main_mini.fadeOut();

    Then on 161 & 162 I see these lines:

    if(jQuery.support.opacity) { overlay.animate({opacity:0});}else{overlay.css({display:'none'});}

    main.animate(animateThis, duration, transition1, function(){ main.css({zIndex:0}); animating = false; });

    The first one is the line that fades out the pixel overlay that I want to keep, and the 2nd one animates the main content area.

    So I delete 161 and change 162 to read:

    main.fadeOut();

    A little further below I see:

    sidebar2.animate(animateThis, duration, transition1);

    Which I change to:

    sidebar2.fadeOut();

    At this point I save the file and test my progress. And it’s exactly what I’d want so far – the sidebar and content areas fade out. The problem is that now I need to get them to fade back in!

    Below the hideContent function I see the start of showContent. So now I assume I’d use “fadeIn” to essentially reverse what I’ve done above.

    So here’s that the showContent function looks like:

    showContent: function()

    {

    if(!animating)

    {

    catch_clicks = false;

    animating = true;

    var animateThis = {left:-windowwWidth};

    sidebar2.animate({left:originalPos.sb_pos2}, duration, transition, function()

    {

    sidebar2.attr('style','');

    });

    setTimeout(function()

    {

    main.css({zIndex:10}).animate({left:originalPos.main_pos}, duration, transition);

    },

    durationBetween);

    linkBack.animate({bottom:-80}, 300);

    thumbnails.animate({bottom:-80}, 300, function()

    {

    thumbnails.css({display:'none'})

    linkBack.css({display:'none'})

    });

    link.fadeIn();

    imagecount.fadeOut();

    setTimeout(function()

    {

    if(jQuery.support.opacity) { overlay.animate({opacity:1}); } else {overlay.css({display:'block'});}

    main_mini.animate({right:originalPos.main_mini_pos}, duration, transition1, function(){ main_mini.css({zIndex:0}); });

    sidebar1.animate({left:originalPos.sb_pos1}, duration, transition, function()

    {

    animating = false;

    sidebar1.attr('style','');

    });

    },

    durationBetween*2);

    }

    return false;

    }

    So I’m trying to change it to this – and it’s not fading my content BACK IN.

    showContent: function()

    {

    if(!animating)

    {

    catch_clicks = false;

    animating = true;

    var animateThis = {left:-windowwWidth};

    sidebar2.fadeIn();

    setTimeout(function()

    {

    main.fadeIn();

    },

    durationBetween);

    linkBack.animate({bottom:-80}, 300);

    thumbnails.animate({bottom:-80}, 300, function()

    {

    thumbnails.css({display:'none'})

    linkBack.css({display:'none'})

    });

    link.fadeIn();

    imagecount.fadeOut();

    setTimeout(function()

    {

    main_mini.fadeIn();

    sidebar1.fadeIn();

    },

    durationBetween*2);

    }

    return false;

    }

    };

    So I’ve clearly missed something. Anyone care to give me some pointers here? I’m definitely not a javascript expert.

    #78033

    Quite a lot to read ;D

    Would you mind sending us a link to your installation so we can take a look at it?

    One thing that definitley needs to be done is to apply callbacks to the fadein functions:

    whenever you see an animate function like this:


    main_mini.animate(animateThis2, duration, transition1, function(){ main_mini.css({zIndex:0}); });

    the last parameter is a callback which will be executed once the animation is complete: in this case the z Index is set to zero:


    function(){ main_mini.css({zIndex:0});

    you need to add this callback to your fadeIn and out functions as well, otherwise this cant work :)

    eg:


    main_mini.fadeOut(function(){ main_mini.css({zIndex:0}); });

Viewing 2 posts - 1 through 2 (of 2 total)

The topic ‘changing the transitions for "hide content and sidebar" to a fade’ is closed to new replies.