當調整窗口大小

Question

在我的網站更改jQuery的動畫我用下面的代碼進行動畫懸停動作：

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時，圖標將動畫爲'top：100px'而不是75px。

我已經做了一個開始，但不知道如何走得更遠。

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

Answer 1

老實說，最簡單的方法是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; 
    } 
}