1

On my website I use the following code to animate a hover action:

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);
});

so that when the user hovers over a project an icon will be displayed as an overlay.

In this situation the image is 940px wide. But the website will be responsive, so is it possible to make this code variable depending on the window size of the browser? For example, when the browser width is 768px the icon will animate to 'top:100px' instead of 75px.

I've made a start with this, but have no idea how to go further.

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 回答