順利改變css

Question

我的情況如下：

我有以下功能

var showHideMemberContent = function(){
if(isHidden === false){
    $("#showHideMemberContent").text("Member Content");
    $("#main").css("height","-=187");
    $('#mainBottom').hide('slow', function() {
        isHidden = true;
    });
} else {
    $("#showHideMemberContent").text("Verberg");
    $("#main").css("height","+=187");
    $('#mainBottom').show('slow', function() {
        isHidden = false;
    });
}
};

所以當函數執行時它隱藏了“mainBottom”div。 “主”div 應該減少/增加它的高度。 它確實如此，但我需要知道是否有辦法順利做到這一點。

謝謝。

Answer 1

您可以使用 CSS 來實現這一點。 只需將此規則添加到#main的 CSS 聲明中：

#main {
    -khtml-transition: height 0.3s ease;
    -moz-transition: height 0.3s ease;
    -ms-transition: height 0.3s ease;
    -o-transition: height 0.3s ease;
    -webkit-transition: height 0.3s ease;
    transition: height 0.3s ease;
}

這里的height部分定義了要應用轉換的屬性， 0.3s定義了從一種狀態轉換到另一種狀態所需的時間， ease屬性定義了轉換的函數。 Ease 將緩慢加速至 50% 過渡，然后減速至 100%。

與 jQuery 的 animate 函數相比，使用 CSS 的優勢在於 CSS 變換在支持時是硬件加速的，並且會更流暢、更高效。 缺點是一些過時的瀏覽器版本不支持該效果，但它會簡單地回退到非動畫高度變化，而不是破壞。

要了解有關 CSS 轉換的更多信息，請訪問下面的 Mozilla 文章鏈接。 它們是此類事情的絕佳參考，也是開始學習甚至復習知識的絕佳場所。 我還在下面包含了此技術的示例。

關於轉換的 MDN 文章。

這是一個 jsfiddle 示例。

Answer 2

是的，使用 jquerys animate()方法， http: //api.jquery.com/animate/。

如果要使用“線性”或“擺動”以外的緩動類型，請包括 jquery ui。 它作為第二個參數（字符串）傳遞給 animate 方法。 https://jqueryui.com/easing/

示例（加載了 jquery ui）：

$(selector).animate({ height: '200px' }, 'easeInOutCubic', function(){ 
    /* animation comlete */ 
});

此外，請提高您的接受率。

Answer 3

您可以為此使用動畫：

var oldHeight = $("#main").height();
$("#main").animate({'height', oldHeight + 187}, { duration: 500, queue: false });

Answer 4

如果你想操作css和class，而不是style屬性，可以使用jquery-ui的switchClass()或者toggleClass()方法http://docs.jquery.com/UI/Effects/switchClass http://jqueryui。 com/demos/toggleClass/

Answer 5

使用 animate()...

var showHideMemberContent = function(){
if(isHidden === false){
    $("#showHideMemberContent").text("Member Content");
    $("#main").animate({height:-=187}, 300);
    $('#mainBottom').hide('slow', function() {
        isHidden = true;
    });
} else {
    $("#showHideMemberContent").text("Verberg");
    $("#main").animate({height:+=187}, 300);
    $('#mainBottom').show('slow', function() {
        isHidden = false;
    });
}
    };