一鍵; Div在相反方向打開

我想知道是否有辦法在JQuery中實現這種效果。一個stackoverflow用戶最近幫助我實現了我要去的效果;現在我想用最有效的方式使用JQuery。下面是小提琴的鏈接的我在尋找什麼，以實現更好的解釋：一鍵; Div在相反方向打開

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

當前版本的運行有些不連貫。提前

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

謝謝，BC：我正在尋找的東西有點光滑，像這樣的。

來源

2012-05-23 itsbc

爲什麼加入jQuery的臃腫的東西，並不需要它？ –

爲什麼你想在jQuery中做到這一點，如果你已經在js中工作了？ – lbstr

好吧，我想如果代碼可以簡化，它會運行得更順暢。對不起，我更新了原文。感謝您的快速響應。 – itsbc

至於其他的註釋部分建議，你是你在性能方面的..如果只是幻燈片動畫..你應該簡單地堅持你有什麼更好..

但是你真正想要的是slideDown animation + hide effect。通常了slideDown動畫展示元素..所以你需要做一個小竅門得到這個工作..見下文，

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 - >在FF和Chrome中驗證。

來源

2012-05-23 21:30:48

剛剛檢出了你的演示，並且它的工作原理並不像OP的原始JS版本那樣流暢。底部疼痛有點「呃逆」（至少在OS X的Chrome上） –

@ChaseFlorell它在Firefox中可以正常工作，但是它在Chrome中失敗，因爲它以'top：0'開頭。我需要檢查.. –

不能等待[requestAnimationFrame]（http://updates.html5rocks.com/2012/05/requestAnimationFrame-API-now-with-sub-millisecond-precision）!!! – lbstr

不使用jQuery可能已經比使用它更有效率。

也許你真正想改變它的原因是對動畫有更多的控制（例如，對動畫的速度或緩動）。如果是這樣的話，試試這個：

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

來源

2012-05-23 21:49:12 mrhigham

好了，我把你的現有代碼和重構它一點。 jQuery調用將如此簡單。

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

然後，從那裏你將有一個單獨的文件包含所需的代碼。

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

來源

2012-05-23 21:50:42

剛回到我的電腦。去看看這個，並試圖完全理解正在發生的一切。感謝您花時間做到這一點。將返回並標記爲答覆/回覆。 – itsbc

哈哈，這似乎和其他人一樣。現在看來我得到了很多幫助，對於最好的選擇是什麼，我有點困惑。感謝您付出的時間和精力。欣賞它。公元前。 – itsbc

沒問題。我所做的只是將原始代碼隔離到一個名稱空間（用於清潔），並允許您在不使用所有膨脹的情況下使用「最小」jQuery。 –

一鍵; Div在相反方向打開

回答

相關問題