PCスマホの画面切り替えで領域がうまくとれません
ＰＣ／スマホ兼用対応のページを作成しており、画面サイズが小さくなった際には横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>
お礼
ご回答頂きありがとうございます。 お教え頂いたように「click」から「toggle」に変えてみたところ、 クリックで動作するようになりました。 もっとjQueryを勉強したいと思います。 お教え頂いたサイトも参考にさせて頂きます。 本当にありがとうございました。