※ ChatGPTを利用し、要約された質問です（原文：PCスマホの画面切り替えで領域がうまくとれません）
PCスマホの画面切り替えで領域がうまくとれません
このQ&Aのポイント
PC／スマホ兼用対応のページを作成しており、画面サイズが小さくなった際には横3グリッドから横2グリッドに変更するようなページです。
画面サイズが変更されるたびに値を取得しているスクリプトがありますが、スマホサイズに切り替えた際にイメージタイトルが残ってしまいます。
また、逆の場合も移動してくれません。解決策を教えてください。
ＰＣ／スマホ兼用対応のページを作成しており、画面サイズが小さくなった際には横3グリッド(width300px/グリッド)から横2グリッド(width360px/グリッド)に変更するようなページです。
その中で、ＰＣの際にはマウスオーバー時にイメージタイトルがスライドイン／スライドアウトするようにしているのですが、以下のスクリプトで画面サイズが変更するたびに値を取得しているつもりなのですが、一度ＰＣでマウスオーバーを行い、スマホサイズに切り替えると左から300pxのところでイメージタイトルが残ってしまってしまいます。
逆の場合も、animation(left:'●●px'）で指定した場所に移動してくれないのですが、ご教授いただけないでしょうか？
初めての質問なため、足りない点など多いかと思いますが、よろしくお願いいたします。
<script type="text/javascript">
window.onload = function(){ resizeTextArea(); }
window.onresize=function(){ resizeTextArea(); }
function getBrowserWidth() {
if ( window.innerWidth ) {
return window.innerWidth;
}
else if ( document.documentElement && document.documentElement.clientWidth != 0 ) {
return document.documentElement.clientWidth;
}
else if ( document.body ) {
return document.body.clientWidth;
}
return 0;
}
function resizeTextArea(){
var w = getBrowserWidth();
if (w >= 960) {
//マスオーバー時に右にスライド
$('.slideright').hover(function(){
$(".cover", this).stop().animate({left:'0px'},{queue:false,duration:300});
}, function() {
$(".cover", this).stop().animate({left:'-300px'},{queue:false,duration:300});
});
//マスオーバー時に左にスライド
$('.slideleft').hover(function(){
$(".cover", this).stop().animate({left:'120px'},{queue:false,duration:300});
}, function() {
$(".cover", this).stop().animate({left:'300px'},{queue:false,duration:300});
});
}else{
$('.slideleft').hover(function(){
$(".cover", this).stop().animate({left:'180px'},{queue:false,duration:0});
}, function() {
$(".cover", this).stop().animate({left:'180px'},{queue:false,duration:0});
});
}
}
</script>
お礼
tenderfeel様 jqueryの明記についてご指摘ありがとうございます。 まだ、こちらのソース上での検証が行えていないのですが まずはお礼をさせてください。 勉強させていただきます。 本当にありがとうございました。
補足
tenderfeel様 ご教授いただいた内容を実装したところjqueryならびにCSS3ともに想定通りになりまして 本当に驚いております。ありがとうございました。 1点、IE9での動作がともにうまくいっていないのですが 何かいい案がございましたら、改めてお教えいただけないでしょうか？