Q&A
PHPではなくJavaScriptではないですか？
###困っている事
wordpressでホームページ作成をしておりましてつまづきましたのでこちらに質問させていただきに参りました。
他のブラウザ（chrome、Firefox等）では普通に表示される要素がsafariでは、ちらついて見えます。
opacityをcssに追加していることでちらついて見えてるみたいなのですが、調べた結果下記のcssを追加すれば修正できるみたいです。
css以外のfunction内でcssを指定している場合、どのようにfunction内に下記のcssを書き込めば良いのか教えてください。
function内に書き込みたいcss↓
css
1.top_fade{ 2 -webkit-backface-visibility:hidden; 3 backface-visibility:hidden; 4}
ここの.top_fadeのcss内に上記のcssを追加したい↓
javascript
1$(function(){ 2 $('.top_fade').fadeOut(0, 1); 3 setTimeout(function() { 4 $('.top_fade').fadeTo(0, 1); 5 $(".top_fade").css({ 6 left:"-50px", 7 opacity:"0.0", 8 }).animate({ 9 left:"50px", 10 opacity:"1.0" 11 },1000); 12 }, 3500); 13});
お分かりになられる方見えましたらお力をお貸しください、よろしくお願いいたします。
backface-visibilityを書き換えないのであれば、そのままCSSでいいのではないでしょうか？
回答3件
0
ベストアンサー
別角度から。
javascript
1$(".top_fade").css({ 2 left:"-50px", 3 opacity:"0.0", 4 }).animate({ 5 left:"50px", 6 opacity:"1.0" 7 },1000);
ここの部分ですが、
javascript
1 $(".top_fade").addClass('anim');
CSS
1.top_fade { 2 left: -50px; 3 opacity: 0; 4 transition: all 1s; 5} 6.top_fade.anim { 7 left: 50px; 8 opacity: 1.0; 9}
などとし、CSSでのアニメーションにしてみるとどうでしょう？
投稿2018/02/01 07:36
編集2018/02/07 09:13
総合スコア3404
返信遅くなりまして申し訳ございません。
$(".top_fade").addClass('anim');
は、
$(".top_fade").css({
left:"-50px",
opacity:"0.0",
}).animate({
left:"50px",
opacity:"1.0"
},1000);
の、どの部分に書き込めばよいのでしょうか？
$(".top_fade").css({
left:"-50px",
opacity:"0.0",
}).animate({
left:"50px",
opacity:"1.0"
},1000);
を
$(".top_fade").addClass('anim');
に入れ替えです
$(".top_fade").addClass('anim');
に入れ替えさせていただきましたが.top_fadeがゆっくり動きながら表示されず
いきなりパッと表示されるようになりました。
ゆっくり表示するのはできないのでしょうか？
質問ばかり申し訳ございませんがお分かりでしたら教えていただきたいです。
失礼しました、「transition」に綴り間違いがありましたので、修正をしました。
「transition」の綴り気づかず申し訳ございません。
無事に実装することができました！本当にありがとうございました！
0
普通にcssメソッドを使うだけでは？
JavaScript
1$(function(){ 2 $('.top_fade').css({ 3 "-webkit-backface-visibility" : "hidden", 4 "backface-visibility" : "hidden" 5 }).fadeOut(0, 1); 6 setTimeout(function() { 7 $('.top_fade') 8 .fadeTo(0, 1) 9 .css({ 10 left:"-50px", 11 opacity:"0.0", 12 }).animate({ 13 left:"50px", 14 opacity:"1.0" 15 },1000); 16 }, 3500); 17});
投稿2018/01/31 10:59
総合スコア4756
ご回答ありがとうございます。
こちら試したところ、やはりsafariではちらついて表示されてしまうみたいです。
この回答はあなたの
> opacityをcssに追加していることでちらついて見えてるみたいなのですが、調べた結果下記のcssを追加すれば修正できるみたいです。
が正しい対処であることを前提とし,
> css以外のfunction内でcssを指定している場合、どのようにfunction内に下記のcssを書き込めば良いのか教えてください。
に対するものです. 従って, 根本的な「safariにおけるちらつきの解消」に対する答えではありません.
そのため, 「ちらつきがbackface-visibilityの設定では解決しなかったのでそれ以外の解決策が欲しい」旨を質問の先頭に追記して下さい.
0
Javascriptでは、そのプロパティ、functionで書き込むのはできないはず・・・。
予め、CSSクラスを用意しておき、要素にクラスを追加する、というやり方はいかがでしょうか？
※見たところ、jQueryを使用している様子なので、jQueryで書きます。
css
1.top_fade_hidden { 2 -webkit-backface-visibility:hidden; 3 backface-visibility:hidden; 4}
javascript
1$(function(){ 2 $('.top_fade').addClass("top_fade_hidden"); 3 4 // 以下略 5});
投稿2018/01/30 09:31
総合スコア9528
わたしはできていますが、できないというのは何の環境でしょうか？
x_xさん>
全ブラウザで効きますでしょうか？
基本的に、ベンダープレフィックスを使ったプロパティは、
javascriptによる追加では、ききません（インナースタイルに追加する形に限る。style要素に、プロパティを追加する場合はできるかも）。
もしくは、ベンダープレフィックスでないと当該プロパティが効かないブラウザの場合は、そもそも追加もできない可能性があります。
> 基本的に、ベンダープレフィックスを使ったプロパティは、javascriptによる追加では、ききません
いや効くと思う. この場合 style.webkitBackfaseVisibilityがそれ. safari以外では単に無視されるだけ.
defghi1977>
なるほど！safariではいけるんですね。
ご質問でも、safariで、ということですもんね。
大変失礼しました。
どのブラウザでもとの念頭で考えてしまいました。
ベンダープレフィックスがついたものがきかない、という話ならばCSSで書いても同じことで、ナンセンスではないですか？
すみません、少々知識が古かったようです。
以前では、ブラウザによってベンダープレフィックスつきのものは、
jQueryのcssでは追加もできなかったり、
インナースタイルに、ベンダープレフィックスを指定した場合は効かなかったりなどの現象は起きていました。
もしかしたら思い違いかもしれません。
あなたの回答
tips
プレビュー
