CODEWITHSUNDEEP
jquerycsshtmlonclick
itsbc
itsbc

Reputation: 530

One Click; Divs Open In Opposite Direction

I'm wondering if there's a way to achieve this effect in JQuery. A stackoverflow user recently help me achieving the effect I was going for; now I want to do it using JQuery and in the most efficient way possible. Here's a link to the fiddle for a better explanation of what I'm looking to achieve:

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

The current version runs a bit choppy. I'm looking for something a bit smoother, such as this:

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

Thanks in advance, Bc.

Upvotes: 2

Views: 183

Answers (3)

Chase Florell
Chase Florell

Reputation: 47367

Ok, so I took your existing code and refactored it a little. The jQuery call will be as simple as this.

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

Then, from there you will have a separate file containing the required 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 + "%";
    }
};​

Try it for yourself

Upvotes: 1

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79830

As other suggested in the comment section, you are better off with what you have in performance aspect.. If it is just slide animation.. you should simply stick to what you have..

However what you really want is slideDown animation + hide effect. Usually slideDown animation is to show element.. so you need to do a little trick to get this working.. See below,

CSS:

#hider1 { 
   position:fixed; /* Changed 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;  /* Changed style*/
   bottom:0;        /* Changed 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 -> Verified in FF and Chrome.

Upvotes: 1

mrhigham
mrhigham

Reputation: 264

Not using jQuery is likely to already be far more efficient than using it.

Perhaps the reason you really want to change it is to have more control over the animation (for example, over the speed or easing of the animation). If that is the case, try this:

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

Upvotes: 0

Related Questions