Q&A
コンソールに何かエラー出てませんか？
縦長画像を下から上に動かすアニメーションがIEだけ正常に動きません。
下から上のアニメが無くいきなり上に飛びます。
ほかの主要ブラウザは動きましたが、どうにかしてIEも対応できないでしょうか。
やりたいこと
・ブラウザ幅の縦長画像を下から一番上まで動かす
・上までいったらフェードアウト
jquery：1.11.3
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset=utf-8> 5<meta http-equiv="X-UA-Compatible" content="ie=edge"> 6<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes, minimum-scale=1.0, maximum-scale=2.0"> 7<meta name="format-detection" content="telephone=no"> 8<meta name="apple-mobile-web-app-capable" content="yes"> 9<meta name="apple-mobile-web-app-status-bar-style" content="black"> 10<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 11<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> 12<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 13</head> 14<style> 15 #main_contents { 16 overflow: hidden; 17 width: 125%; 18 position: absolute; 19 left: 50%; 20 transform: translateX(-50%); 21 z-index: 100; 22 height: 100VH; 23 z-index: 100; 24 } 25 #main_contents img { 26 width: 100%; 27 position: absolute; 28 bottom: 0; 29 } 30</style> 31<body onload = "initMap()" id="toplink"> 32<div id="main_contents"> 33 <img src="img/1.jpg" /> 34</div> 35<script> 36 $('#main_contents').delay(500).fadeIn(1000, 1); 37 var footerOffsetTop = $('#main_contents img').offset().bottom;// 移動先の位置を取得します 38 $('#main_contents img').css({'position':'absolute','bottom':footerOffsetTop}) 39 $('#main_contents img').delay(2000).animate({ 40 top: '' 41 },5800,"swing",function(){ 42 $('#main_contents').delay(1000).fadeTo(2000, 0.01, function(){ 43 $(this).slideUp(150, function() { 44 $(this).remove(); 45 }); 46 }); 47 }); 48 let el = document.querySelector('#main_contents img'); 49 let wrapper = document.querySelector('#main_contents'); 50 wrapper.addEventListener('mouseenter', addWillChange); 51 el.addEventListener('animationEnd', removeWillChange); 52 function addWillChange() { 53 let target = this.children[0]; 54 target.style.willChange = 'opacity'; 55 } 56 function removeWillChange() { 57 this.style.willChange = 'unset'; 58 } 59 60</script> 61</body> 62</html> 63
css
1#main_contents { 2 overflow: hidden; 3 width: 100%; 4 position: absolute; 5 left: 50%; 6 transform: translateX(-50%); 7 z-index: 100; 8 height: 100vh; 9 } 10 #main_contents img { 11 width: 100%; 12 position: absolute; 13 bottom: 0; 14 }
jquery
1var footerOffsetTop = $('#main_contents img').offset().bottom;// 移動先の位置 2 $('#main_contents img').css({'position':'absolute','bottom':footerOffsetTop}) 3 $('#main_contents img').delay(5000).animate({ 4 top: '' 5 },5800,"swing",function(){ 6 $('#main_contents').fadeTo(1000, 0.01, function(){ 7 $(this).slideUp(150, function() { 8 $(this).remove(); 9 }); 10 }); 11 });
コンソールエラー
DOM7011: このページのコードによって、バックワード キャッシュとフォワード キャッシュが無効になりました。詳細については、http://go.microsoft.com/fwlink/?LinkID=291337 を参照してください。
HTML1300: ナビゲーションが発生しました。
SEC7113: CSS は、MIME の種類が一致しないため、無視されました
SCRIPT5009: 'initMap' は定義されていません。
IEのコンソールエラーを追記しました。
chromeの方も確認しましたがこちらはエラーは出てませんでした。
SEC7113: CSS は、MIME の種類が一致しないため、無視されました
↑これが問題な気がするのですが、解決方法等おわかりでしょうか・・・
HTMLもなるべく全体追記いただけますか？
提示内容だけでは当該エラー確認できませんので。
回答1件
0
ベストアンサー
offset().bottom
が駄目です
投稿2020/08/28 07:28
総合スコア116734
こんな感じですかね？
$(function(){
$('#main_contents img').css({'position':'absolute','bottom':0});
var footerOffsetTop = $('#main_contents img').offset().top;
$('#main_contents img').css({'position':'absolute','top':footerOffsetTop,'bottom':''})
$('#main_contents img').delay(5000).animate({
top: ''
},5800,"swing",function(){
$('#main_contents').fadeTo(1000, 0.01, function(){
$(this).slideUp(150, function() {
$(this).remove();
});
});
});
});
>$('#main_contents img').css({'position':'absolute','top':footerOffsetTop,'bottom':''})
ここのコードでうまく動くようになりました。
ありがとうございます。
あなたの回答
tips
プレビュー
