!importantの指定で fadeIn,fadeOutがうまく表示されない。

前提・実現したいこと

!importantの指定で
fadeIn,fadeOutがうまく表示されない。

###現状

PC表示にする際に、style="display: none !important;"とsp表示用のclassに指定しているため
fadeIn,fadeOutがうまく表示されない。
CSSの!importantをつけたままfadeInさせるにはどのようにすればいいのだろうか？

発生している問題・エラーメッセージ

Javascript
1
2var topBtn1 = $('#sp2');
3$('#sp2').css({"cssText" : "display : none !important"});
4// SPに表示が切り替わると"display : block !important"とCSSに記述しているので消す為
5$(function(){
6	$(window).scroll(function(){
7		if ($(this).scrollTop() > 100) {
8			topBtn1.fadeIn();
9		} else{
10			topBtn1.fadeOut();
11		}
12	});
13
14	//スクロールしてトップ
15	topBtn.click(function () {
16			$('body,html').animate({
17					scrollTop: 0
18			}, 600);
19			return false;
20	});
21});
22
23
24
25

html
1<div id="sp2" class="sp">
2
3<div>
4<h3>title</h3>
5</div>
6
7<div>
8<h3>title</h3>
9</div>
10
11</div>

CSS
1
2//SP
3@media only screen and (max-width: 480px)
4.sp {
5    display: block !important;
6}
7
8//PC
9
10.sp {
11    display: none !important;
12}

行動規範の内容に同意します

回答2件

ベストアンサー

オススメはしないですが、力技で行くのならfadeIn開始時にsp表示用のclassを要素から除外し、fadeIn処理が完了後にsp表示用の!importantを打ち消すstyleを入れて、classを要素に入れ直す。

※確認用のためコードを何箇所か書き換え。

html
1<div style="height: 1000px;">
2  <div id="sp1" class="pc">  
3    <div style="background: orange; width: 100%; height: 100px;"><h3>title_PC</h3></div>  
4  </div> 
5
6  <div id="sp2" class="sp">  
7    <div style="background: skyblue; width: 100%; height: 100px;"><h3>title_SP</h3></div>  
8  </div>   
9</div>

css
1.sp {  
2display: none !important;  
3} 
4
5@media only screen and (max-width: 480px)  {
6  .sp {  
7  display: block !important;  
8  }    
9}

js
1var topBtn1 = $('#sp2');
2
3$('#sp2').css({"cssText" : "display : none !important"});
4// SPに表示が切り替わると"display : block !important"とCSSに記述しているので消す為
5$(function(){
6    $(window).scroll(function(){
7        if ($(this).scrollTop() > 100) {
8            topBtn1.removeClass("sp");
9            topBtn1.fadeIn("normal", function(){
10              $('#sp2').css({"cssText" : "display : block !important"});
11              topBtn1.addClass("sp");
12            });
13        } else{
14            topBtn1.fadeOut("normal", function(){
15              $('#sp2').css({"cssText" : "display : none !important"});
16            });       
17        }
18    });
19});

投稿2019/09/19 08:19

vnsa7221

総合スコア348

GIIIG

2019/09/23 07:04

ご回答ありがとうございます。こちらでうまくいけました！

行動規範の内容に同意します

PC側もメディアクエリで制御するのはダメでしょうか。

css
1
2//SP  
3@media only screen and (max-width: 480px)  
4.sp {  
5display: block !important;  
6}  
7
8//PC  
9
10.sp {  
11display: none !important;  
12}

↓↓↓↓変更

css
1
2//SP  
3@media only screen and (max-width: 480px)  {
4  .sp {  
5    display: block !important;  // ここの記述は要らない
6  }  
7}
8
9//PC  
10@media only screen and (min-width: 481px)  {
11  .sp {  
12    display: none !important;  
13  }  
14}