Click once to reveal divs opening in opposite directions

Question

Click once to reveal divs opening in opposite directions

Is there a way to achieve this JQuery effect efficiently? A helpful user on Stackoverflow assisted me in reaching the desired effect. Now, I want to implement it using JQuery in the most optimal manner possible. For a clearer understanding of what I aim to accomplish, please refer to the following fiddle link:

http://jsfiddle.net/itsbc/U3Lg9/11/

The current implementation is a bit choppy, and I am seeking a smoother transition similar to this example:

http://jsfiddle.net/itsbc/QchfJ/

Thank you in advance, Bc.

jquery css html onclick

Answer 1

Answer №1

Some users in the comments section have recommended sticking with your current setup for performance reasons, especially if you are only using slide animations.

However, if you are looking to achieve a combination of

slideDown animation + hide effect

, you can follow these steps:

CSS:

#hider1 { 
   position:fixed; /* Updated style*/
   top: 0px;       
   background: black;
   width:100%;
   height:48%;
   min-height:0px;
   text-align:center;
   color:white; 
}

#hider2 { 
   background-color:black;
   width:100%;
   height:50%;
   text-align:center;
   position:fixed;  /* Updated style*/
   bottom:0;        /* Updated style*/
   color:white; 
}

JS:

$(function () {
    $('#test').on('click', function () {
        $('#hider1').animate({            
            height: 0,
            opacity: 0.2 //<-- Fancy stuff
         },1000 );

        $('#hider2').animate({            
            height: 0,
            opacity: 0.2 //<-- Fancy stuff
         },1000 );

    });
});

DEMO -> Tested and working in FF and Chrome browsers.

Answer 2

Some users in the comments section have recommended sticking with your current setup for performance reasons, especially if you are only using slide animations.

However, if you are looking to achieve a combination of

slideDown animation + hide effect

, you can follow these steps:

CSS:

#hider1 { 
   position:fixed; /* Updated style*/
   top: 0px;       
   background: black;
   width:100%;
   height:48%;
   min-height:0px;
   text-align:center;
   color:white; 
}

#hider2 { 
   background-color:black;
   width:100%;
   height:50%;
   text-align:center;
   position:fixed;  /* Updated style*/
   bottom:0;        /* Updated style*/
   color:white; 
}

JS:

$(function () {
    $('#test').on('click', function () {
        $('#hider1').animate({            
            height: 0,
            opacity: 0.2 //<-- Fancy stuff
         },1000 );

        $('#hider2').animate({            
            height: 0,
            opacity: 0.2 //<-- Fancy stuff
         },1000 );

    });
});

DEMO -> Tested and working in FF and Chrome browsers.

Answer 3

Answer №2

Alright, I made some adjustments to your code for better performance. The jQuery function call has been simplified.

$("#opener").click(function() {
    myApp.websiteOpener.displayWebsite('hider1', 'hider2');
});

After that, you will need a separate file with the necessary code.

var myApp = {};
myApp.websiteOpener = {

    up: null,
    down: null,
    topPanel: null,
    bottomPanel: null,

    displayWebsite: function(tPanel, bPanel) {
        if (typeof up !== "undefined") return;
        topPanel = tPanel;
        bottomPanel = bPanel;
        up = setInterval(this.goUp, 2);
        down = setInterval(this.goDown, 2);
    },

    goUp: function(x) {
        var h1 = document.getElementById(this.topPanel);
        if (h1.offsetHeight <= 0) {
            clearInterval(up);
            return;
        }
        h1.style.height = parseInt(h1.style.height) - 1 + "%";
    },

    goDown: function(x) {
        var h2 = document.getElementById(this.bottomPanel);
        if (h2.offsetHeight <= 0) {
            clearInterval(down);
            return;
        }
        h2.style.top = parseInt(h2.style.top) + 1 + "%";
        h2.style.height = parseInt(h2.style.height) - 1 + "%";
    }
};

Give it a try on your own

Answer 4

Alright, I made some adjustments to your code for better performance. The jQuery function call has been simplified.

$("#opener").click(function() {
    myApp.websiteOpener.displayWebsite('hider1', 'hider2');
});

After that, you will need a separate file with the necessary code.

var myApp = {};
myApp.websiteOpener = {

    up: null,
    down: null,
    topPanel: null,
    bottomPanel: null,

    displayWebsite: function(tPanel, bPanel) {
        if (typeof up !== "undefined") return;
        topPanel = tPanel;
        bottomPanel = bPanel;
        up = setInterval(this.goUp, 2);
        down = setInterval(this.goDown, 2);
    },

    goUp: function(x) {
        var h1 = document.getElementById(this.topPanel);
        if (h1.offsetHeight <= 0) {
            clearInterval(up);
            return;
        }
        h1.style.height = parseInt(h1.style.height) - 1 + "%";
    },

    goDown: function(x) {
        var h2 = document.getElementById(this.bottomPanel);
        if (h2.offsetHeight <= 0) {
            clearInterval(down);
            return;
        }
        h2.style.top = parseInt(h2.style.top) + 1 + "%";
        h2.style.height = parseInt(h2.style.height) - 1 + "%";
    }
};

Give it a try on your own

Answer 5

Answer №3

Avoiding the use of jQuery may actually result in better performance compared to using it.

It's possible that you are considering changing your approach in order to have more precise control over animations, such as adjusting speed or easing effects. If this is your goal, you can experiment with the following solution:

http://jsfiddle.net/U3Lg9/13/

Answer 6

Avoiding the use of jQuery may actually result in better performance compared to using it.

It's possible that you are considering changing your approach in order to have more precise control over animations, such as adjusting speed or easing effects. If this is your goal, you can experiment with the following solution:

http://jsfiddle.net/U3Lg9/13/

Click once to reveal divs opening in opposite directions

Answer №1

Answer №2

Answer №3

Similar questions

What's the reason behind beforeunload not triggering?

bootstrap 5 with uneven spacing

Choosing dropdown options without the <Select> tag in Selenium with Python

Tips for styling a PHP file using CSS and styling more than one element:1. Begin by creating a

Steps for designing an animated background element

Conceal and reveal a list on page load with jQuery

Is it possible for PHP to use the set cookie function to replace the cookie value set by JQuery cookie?

Is there a way to prevent on-click errors in ReactJS that someone can share with me?

Several directories containing references to PHP and CSS files

CSS is functioning properly on a local level, but fails to take effect once the "npm run build" command is executed in the React application's build

Adjust the height of the embedded YouTube video iframe

The functionality of my input and button tags is compromised because of the background animation

Struggling with missing spaces when converting XML with HTML elements to CSV

Dealing with unsuccessful ajax responses

Eliminating date and time formatting in HTML emails on iPhones

How far apart are two surfaces when they are rotated along the Y-axis

The Ajax call functions perfectly on its own, but encounters issues when integrated with WordPress

The value of the checked input with the name `nameofinput` is currently not defined

Creating a dynamic duplication feature for a form's text area

sidebar that appears upon the initial page load