1

私のWebサイトでは、次のコードを使用してホバーアクションをアニメーション化します。

jQuery('#portfolio .project').hover( function() {
   // Animate icon
   jQuery(this).find('.overlay').animate({opacity:1.0, top:'75px'}, 300);
}, function() {
   // Hide icon
   jQuery(this).find('.overlay').animate({opacity:0, top:'155px'}, 300);
});

これにより、ユーザーがプロジェクトにカーソルを合わせると、アイコンがオーバーレイとして表示されます。

この状況では、画像の幅は940ピクセルです。しかし、ウェブサイトはレスポンシブになるので、ブラウザのウィンドウサイズに応じてこのコードを可変にすることは可能ですか？たとえば、ブラウザの幅が768pxの場合、アイコンは75pxではなく'top：100px'にアニメーション化されます。

私はこれから始めましたが、さらに先に進む方法がわかりません。

jQuery(window).resize(function() {
   var window_width = jQuery(window).width();
4

1 に答える 1

0

正直なところ、あなたにとって最も簡単な方法はCSSです。

ページはレスポンシブであるため、ウィンドウサイズごとに異なるCSSスタイルがすでに用意されています。クラスを追加して切り替えると、さまざまな値を簡単に設定できます。

CSSの場合：

/*
 * if the device width is bigger or equal to 768,
 * set the hover top property to 100px
 */

@media only screen and (min-device-width : 768px) {
    .overlay.hover {
        top: 100px;
    }
}

/*
 * if the device width is smaller or equal to 767
 * set the hover top property to 75px
 */

@media only screen and (max-device-width : 767px) {
    .overlay.hover {
        top: 75px;
    }
}

そして、残っているのはトグルクラスだけです！

jQuery('.container').hover( function() {
    // Animate icon
    jQuery(this).find('.overlay').stop().toggleClass('hover', 300).animate({
        opacity: 1.0
    }, 300);
}, function() {
    // Hide icon
    jQuery(this).find('.overlay').stop().toggleClass('hover', 300).animate({
        opacity: 0.2
    }, 300);
});​

ただし、これが非常に手間がかかると思われる場合は（かなりきれいですが）、いつでもjavascriptで行うことができます。

var animatetop = getAnimateTop();

jQuery(window).resize(function() {
    animatetop = getAnimateTop();
});

jQuery('#portfolio .project').hover( function() {
    // Animate icon
    jQuery(this).find('.overlay').stop().animate({
        opacity: 1.0,
        top: animatetop + 'px'
    }, 300);
}, function() {
    // Hide icon
    jQuery(this).find('.overlay').stop().animate({
        opacity: 0,
        top:'155px'
    }, 300);
});

function getAnimateTop() {
    if(jQuery(this).width() >= 768) {
        return 100;
    } else {
        return 75;
    }
}
于 2012-07-18T07:15:22.837 に答える