平滑過渡標題導航類

我創建了這個site，標題使用jQuery Ui和twitter bootstrap轉換。這個想法是，有兩個類.navbar-transparent和.navbar-white，我使用.switchClass()函數，當頁面的滾動位置不在頂部時，jQuery Ui Effects提供了在兩個類中轉換更改。平滑過渡標題導航類

問題然而，現在的導航是，我相信技術術語是「janky」。過渡並不平坦，從透明到白色時，沒有一種字體顏色完全不會變形，只是變成黑色。

這個shopify主題Retina/Austin做了一個很好的工作，使過渡順利與CSS過渡。

.header{ 
    -webkit-transition: all 500ms ease; 
    -moz-transition: all 500ms ease; 
    -o-transition: all 500ms ease; 
    -ms-transition: all 500ms ease; 
    transition: all 500ms ease; 
}

這裏是我的javascript代碼：

mindful_matter.header = function() { 
    if ($(".navbar-transparent").length == 0) return false; 
    var callback = function() { 
     var scrolled_val = $(document).scrollTop().valueOf(); 
     if (scrolled_val > 0) { 
      $(".navbar").switchClass("navbar-transparent", "navbar-white"); 
     } else { 
      $(".navbar").switchClass("navbar-white", "navbar-transparent"); 
     } 
    } 
    callback(); 
    $(window).scroll(callback); 
}

有沒有什麼辦法可以使過渡更平滑？使用我已有的設置？當我有兩個需要彼此交換的類時，我可以使用css轉換嗎？

來源

2014-02-25 ThomasReggi

你是否正在過渡字體顏色？這似乎是你的問題，而不是別的。 –

@Paulie_D我在兩個類之間轉換，該類控制着它內的所有內容，包括字體顏色。 – ThomasReggi

也許你可以向我們展示CSS類。我懷疑它不包括字體顏色的轉換。 –

.navbar{ 
    transition: background-color 500ms ease; 
}

來源

2014-02-25 17:26:29 ThomasReggi

平滑過渡標題導航類

回答

相關問題