Home>

We develop a page-information introduction, 5 div blocks on it (for now), each size in the browser window. It is necessary that when clicking on the 1st block smoothly displayed the 2nd (at the same time, the first unit should be seamlessly disappeared), and so on to the final block; Fadeout /Fadein is quite suitable (you can and other animations, if not difficult). I tried via absolute positioning, Visibility: Hidden (or Display: None) and jQuery-shift attributes for each individual block, but too cumbersome. If the solution is the cycle, it must be finite, because The last DIV contains links to the branches of the site.

If you add your code with which something did not work out (not the entire code of your site, namely the piece of which you ask), most likely someone will help. And with such a production ... Rather, it is rejected.

Макс к2021-06-29 09:12:50

The fact of the matter is that my code works, but it is quite cumbersome. And I'm looking for an optimal solution to the problem.

джohn джohnuch2021-06-29 09:15:32

The fact of the matter is that we need your code to improve it.

Stepan Kasyanenko2021-06-29 09:28:44
  • Answer # 1

    Consider CSS property Transition. . Actually, the complexity is to understand work Transition.

    TRANSITION has a value Transition-Timing-Function

    Transition-Timing-Function is a mathematical function, showing how quickly changes the specified through time TRANSITION-PROPERTY Value property.

    This means a change in some time in time will be the same, but the animation will look in different ways.

    Example:

    var pages= ['# Page_1', '# Page_2', '# Page_5'];
    var allpages= '.page-Container';
    FUNCTION SHOW (PREV, NEXT) {
      $ (prev) .RemoveClass ('Show');
      $ (Next) .addclass ('Show');
    } 
    .page-Container {
       Transition: OPACITY 1S, Width 1S Step-End, Height 1S Step-End;
       width: 0;
       Height: 0;
       OPACITY: 0;
    }
    .show {
       Transition: OPACITY 3S LINEAR;
       width: 400px;
       Height: 400px;
       OPACITY: 1;
    }
    .page-Container.One {
      Background: Green;
    }
    .page-container.two {
      Background: Red;
    }
    .page-Container.Three {
      Background: Yellow;
    }
    .page-container.four {
      Background: Olive;
    }
    .page-container.five {
      Background: Gray;
    } 
    <
    script src= "https://cdnjs.cloudflare.com/ajax/libs/JQuery/3.3.1/jquery.min.js" >
    ≪
    /script >
    ≪
    Div id= "Page_1" Class= "Page-Container One Show" OnClick= "Show (Pages [0],
     Pages [1]) ">
    1 <
    /div >
    ≪
    Div id= "Page_2" Class= "Page-Container TWO" OnClick= "Show (Pages [1],
     Pages [2]) ">
    2 <
    /div >
    ≪
    DIV ID= "Page_3" Class= "Page-Container Three" OnClick= "Show (Pages [2],
     Pages [3]) ">
    3 <
    /div >
    ≪
    Div id= "Page_4" Class= "Page-Container Four" OnClick= "Show (Pages [3],
     Pages [4]) ">
    4 <
    /div >
    ≪
    Div id= "Page_5" Class= "Page-Container Five" OnClick= "Show (Pages [4],
     Pages [0]) ">
    5 &​​lt;
    /div >
    

    In this example, look at closing block by removing class Show

    .page-Container {
           Transition: OPACITY 1S, Width 1S Step-End, Height 1S Step-End;
           width: 0;
           Height: 0;
           OPACITY: 0;
        }
    

    Here will first work smoothly OPACITY: 0; and then at the end of the period are collected width and Height . Such an effect is waged by the properties of STEP-END and EASE

    Opacity 1S (default EASE)

    Ease Animation begins slowly, then accelerated by the end of the movement Slow down again Step-End as such an animation is not. Style properties are in the initial value of the specified time, then immediately take the final value.

    In another example

    var pages= ['# Page_1', '# Page_2', '# Page_5'];
    var allpages= '.page-Container';
    FUNCTION SHOW (PREV, NEXT) {
      $ (prev) .RemoveClass ('Show');
      $ (Next) .addclass ('Show');
    } 
    .page-Container {
       Transition: Opacity 1S, Width 1S Ease-Out, Height 1S Ease-Out;
       width: 0;
       Height: 0;
       OPACITY: 0;
    }
    .show {
       Transition: OPACITY 2S LINEAR;
       width: 400px;
       Height: 400px;
       OPACITY: 1;
    }
    .page-Container.One {
      Background: Green;
    }
    .page-container.two {
      Background: Red;
    }
    .page-Container.Three {
      Background: Yellow;
    }
    .page-container.four {Background: Olive;}
    .page-container.five {
      Background: Gray;
    } 
    <
    script src= "https://cdnjs.cloudflare.com/ajax/libs/JQuery/3.3.1/jquery.min.js" >
    ≪
    /script >
    ≪
    Div id= "Page_1" Class= "Page-Container One Show" OnClick= "Show (Pages [0],
     Pages [1]) ">
    1 <
    /div >
    ≪
    Div id= "Page_2" Class= "Page-Container TWO" OnClick= "Show (Pages [1],
     Pages [2]) ">
    2 <
    /div >
    ≪
    DIV ID= "Page_3" Class= "Page-Container Three" OnClick= "Show (Pages [2],
     Pages [3]) ">
    3 <
    /div >
    ≪
    Div id= "Page_4" Class= "Page-Container Four" OnClick= "Show (Pages [3],
     Pages [4]) ">
    4 <
    /div >
    ≪
    Div id= "Page_5" Class= "Page-Container Five" OnClick= "Show (Pages [4],
     Pages [0]) ">
    5 &​​lt;
    /div >
    

    Animated as with and height

    Transition: Opacity 1S, Width 1S Ease-Out, Height 1s Ease-Out;

    Ease-Out Animation begins fast, slow down to the end

    Due to the fact that Width and Height change according to the specified EASE-OUT function, this effect is obtained.

  • Answer # 2

    Consider CSS property Transition. . Actually, the complexity is to understand work Transition.

    TRANSITION has a value Transition-Timing-Function

    Transition-Timing-Function is a mathematical function, showing how quickly changes the specified through time TRANSITION-PROPERTY Value property.

    This means a change in some time in time will be the same, but the animation will look in different ways.

    Example:

    var pages= ['# Page_1', '# Page_2', '# Page_5'];
    var allpages= '.page-Container';
    FUNCTION SHOW (PREV, NEXT) {
      $ (prev) .RemoveClass ('Show');
      $ (Next) .addclass ('Show');
    } 
    .page-Container {
       Transition: OPACITY 1S, Width 1S Step-End, Height 1S Step-End;
       width: 0;
       Height: 0;
       OPACITY: 0;
    }
    .show {
       Transition: OPACITY 3S LINEAR;
       width: 400px;
       Height: 400px;
       OPACITY: 1;
    }
    .page-Container.One {
      Background: Green;
    }
    .page-container.two {
      Background: Red;
    }
    .page-Container.Three {
      Background: Yellow;
    }
    .page-container.four {
      Background: Olive;
    }
    .page-container.five {
      Background: Gray;
    } 
    <
    script src= "https://cdnjs.cloudflare.com/ajax/libs/JQuery/3.3.1/jquery.min.js" >
    ≪
    /script >
    ≪
    Div id= "Page_1" Class= "Page-Container One Show" OnClick= "Show (Pages [0],
     Pages [1]) ">
    1 <
    /div >
    ≪
    Div id= "Page_2" Class= "Page-Container TWO" OnClick= "Show (Pages [1],
     Pages [2]) ">
    2 <
    /div >
    ≪
    DIV ID= "Page_3" Class= "Page-Container Three" OnClick= "Show (Pages [2],
     Pages [3]) ">
    3 <
    /div >
    ≪
    Div id= "Page_4" Class= "Page-Container Four" OnClick= "Show (Pages [3],
     Pages [4]) ">
    4 <
    /div >
    ≪
    Div id= "Page_5" Class= "Page-Container Five" OnClick= "Show (Pages [4],
     Pages [0]) ">
    5 &​​lt;
    /div >
    

    In this example, look at closing block by removing class Show

    .page-Container {
           Transition: OPACITY 1S, Width 1S Step-End, Height 1S Step-End;
           width: 0;
           Height: 0;
           OPACITY: 0;
        }
    

    Here will first work smoothly OPACITY: 0; and then at the end of the period are collected width and Height . Such an effect is waged by the properties of STEP-END and EASE

    Opacity 1S (default EASE)

    Ease Animation begins slowly, then accelerated by the end of the movement Slow down again Step-End as such an animation is not. Style properties are in the initial value of the specified time, then immediately take the final value.

    In another example

    var pages= ['# Page_1', '# Page_2', '# Page_5'];
    var allpages= '.page-Container';
    FUNCTION SHOW (PREV, NEXT) {
      $ (prev) .RemoveClass ('Show');
      $ (Next) .addclass ('Show');
    } 
    .page-Container {
       Transition: Opacity 1S, Width 1S Ease-Out, Height 1S Ease-Out;
       width: 0;
       Height: 0;
       OPACITY: 0;
    }
    .show {
       Transition: OPACITY 2S LINEAR;
       width: 400px;
       Height: 400px;
       OPACITY: 1;
    }
    .page-Container.One {
      Background: Green;
    }
    .page-container.two {
      Background: Red;
    }
    .page-Container.Three {
      Background: Yellow;
    }
    .page-container.four {Background: Olive;}
    .page-container.five {
      Background: Gray;
    } 
    <
    script src= "https://cdnjs.cloudflare.com/ajax/libs/JQuery/3.3.1/jquery.min.js" >
    ≪
    /script >
    ≪
    Div id= "Page_1" Class= "Page-Container One Show" OnClick= "Show (Pages [0],
     Pages [1]) ">
    1 <
    /div >
    ≪
    Div id= "Page_2" Class= "Page-Container TWO" OnClick= "Show (Pages [1],
     Pages [2]) ">
    2 <
    /div >
    ≪
    DIV ID= "Page_3" Class= "Page-Container Three" OnClick= "Show (Pages [2],
     Pages [3]) ">
    3 <
    /div >
    ≪
    Div id= "Page_4" Class= "Page-Container Four" OnClick= "Show (Pages [3],
     Pages [4]) ">
    4 <
    /div >
    ≪
    Div id= "Page_5" Class= "Page-Container Five" OnClick= "Show (Pages [4],
     Pages [0]) ">
    5 &​​lt;
    /div >
    

    Animated as with and height

    Transition: Opacity 1S, Width 1S Ease-Out, Height 1s Ease-Out;

    Ease-Out Animation begins fast, slow down to the end

    Due to the fact that Width and Height change according to the specified EASE-OUT function, this effect is obtained.