如何使fadeIn（）和hide（）僅適用於平板電腦和桌面版本？

-1

我有以下CSS來保持我的頁面元素的一個最初是隱藏的：如何使fadeIn（）和hide（）僅適用於平板電腦和桌面版本？

@media only screen { 
    #page-element-1 { 
    display: none; 
    } 
}

及以下JS來淡入

$('page-element-2').click(function(){ 
    $('#page-element-1').fadeIn(); 
}

但是我想被點擊另一個元素時的元素：僅在平板電腦和桌面上淡入元素。我該怎麼做？

我確實嘗試用類似於：if (screen.width >= 769){}的方式包裝js。但即使如此，當我調整瀏覽器，我也看到了#page-element-1作爲

element.style { 
    display:block 
}

覆蓋：

#page-element-1 { 
    display: none; 
}

來源

2015-04-21 kmdhrm

而不是發起這樣的淡入淡出，使用CSS轉換應用所需的效果，使用媒體查詢來定位所需的設備，然後使用JS切換類。 – Shaggy

我希望你知道用戶不會自然調整瀏覽器的大小，對吧？大多數情況下，他們是在手機或電腦上（+平板電腦）。因此，使用「if（screen.width> = 769）{}」可能就足夠了。或者，您必須創建將檢查調整大小的處理程序。我可以看到的最好的解決方案是@Shaggy。 – Bladepianist

擴展我上面的評論，而不是嘗試通過JavaScript應用效果，而是使用CSS轉換來實現這一點，針對您想要的媒體查詢所需的分辨率，然後使用JS通過切換類來啓動效果。

這裏是概念的純JS證明，點擊綠色div來顯示紅色的div以上：

document.getElementById("shown").addEventListener("click",function(){ 
 
    document.getElementById("hidden").classList.toggle("shown"); 
 
},0);

#hidden{ 
 
    background:red; 
 
    height:0; 
 
} 
 
@media all and (min-width:769px){ 
 
    #hidden{ 
 
     opacity:0; 
 
    } 
 
    #hidden.shown{ 
 
     opacity:1; 
 
     transition:opacity .5s; 
 
    } 
 
} 
 
#hidden.shown{ 
 
    height:100px; 
 
} 
 
#shown{ 
 
    background:green; 
 
    cursor:pointer; 
 
    height:100px; 
 
}

<div id="hidden"></div> 
 
<div id="shown"></div>

來源

2015-04-21 12:17:45 Shaggy

-1

要見你應該使用Chrome和Firefox提供的移動模擬的變化，重新加載頁面。那並且使用media queries。

來源

2015-04-21 12:08:11 Outpox

正如其他人所建議的，最好的方法是在css中使用關鍵幀。

，如果你想要做它在JavaScript，請嘗試：

if ($(window).width() < 796) { 
    //DO STUFF 
}

來源

2015-04-21 12:11:56 Asher

有幾個關鍵因素在這裏。

確保您在<head>元素有<meta name="viewport" content="width=device-width" />。
正如@Shaggy所說，您需要使用media queries來達到所需的效果。

例如：

@media (min-width: 768px) { // tablets can't go below 768px 
    #someID { 
     // styles 
    } 
}

附加媒體查詢here選定設備

關於你的javascript計算瀏覽器的尺寸調整，但是這僅適用於doc加載，除非您使用resize事件。

$(window).on('resize', function() { 
    // throw your resize code here for whatever you want to hide/show 
    if (window.screen.availWidth > 768 { 
      ...... 
    } 
});

你不一定必須使用都的resize事件和媒體的質疑。調整瀏覽器大小後，媒體查詢將獲取寬度併爲元素分配樣式。

來源

2015-04-21 12:12:25

如何使fadeIn（）和hide（）僅適用於平板電腦和桌面版本？

回答

相關問題