如何在窗口中更改jQuery的動畫值調整

我必須根據窗口寬度jQuery的動畫：如何在窗口中更改jQuery的動畫值調整

if(jQuery(window).width() >= 1100){  
    jQuery('#element1').mouseenter(function(){ 
     jQuery('#element2').animate({'top':'60px'},400); 
    }); 
} 
if(jQuery(window).width() < 1100){  
    jQuery('#element1').mouseenter(function(){ 
     jQuery('#element2').animate({'top':'120px'},400); 
    }); 
}

當我調整窗口大小的屏幕，動畫沒有遵循它。我的意思是，當我打開全尺寸的瀏覽器屏幕，例如1400像素寬度，它適用於參數，因爲它應該這樣做，但是當我將屏幕拖動到800像素時，動畫使相同的動畫（頂部60px而不是頂部120px ）。

如果我以800px寬度打開瀏覽器，它會給出正確的動畫（頂部120px）。

有沒有辦法通過瀏覽器屏幕拖動來改變動畫，訪問者不應該被迫刷新正確的動畫頁面？

我不知道我是否足夠清楚，不要猶豫，問我，如果不是！

來源

2015-04-05 Igor Laszlo

// wrap the code in a function to call it multiple times 

function windowResize(){ 

//clear any old event bindings 
jQuery('#element1').off("mouseenter"); 

if(jQuery(window).width() >= 1100){  
    jQuery('#element1').mouseenter(function(){ 
     jQuery('#element2').animate({'top':'60px'},400); 
    }); 
    } 

if(jQuery(window).width() < 1100){  
    jQuery('#element1').mouseenter(function(){ 
     jQuery('#element2').animate({'top':'120px'},400); 
    }); 
    }  
} 

// call it first time when page loads 
windowResize(); 

// call it on window resize 
$(window).resize(windowResize);

來源

2015-04-05 21:04:04

非常感謝，它的工作原理！然而，當我調整大小，動畫有一個easeInBack（或類似的東西）效果，而不是一個正常的緩解效果，但沒關係，它是這樣安靜的有趣... :) – 2015-04-05 21:27:15

的理由讓你遇到的問題是因爲你只查詢窗口的大小一次，在這個例子中的代碼顯示了Jquery的調整方法是利用不斷更新的窗口大小，因此給你期望的結果。

$("#reset").click(function() { 
 
    $('#element2').animate({ 
 
    'top': '0px' 
 
    }, 400); 
 
}) 
 

 
$(document).ready(function() { 
 
    checkSize(); 
 
}); 
 
$(window).resize(function() { 
 
    checkSize(); 
 
}); 
 

 
function checkSize() { 
 
    if ($(window).width() >= 1100) { 
 
    $('#element1').mouseenter(function() { 
 
     $('#element2').animate({ 
 
     'top': '60px' 
 
     }, 400) 
 
    }); 
 
    } 
 
    if ($(window).width() < 1100) { 
 
    $('#element1').mouseenter(function() { 
 
     $('#element2').animate({ 
 
     'top': '120px' 
 
     }, 400); 
 
    }); 
 
    } 
 
}

#element1, 
 
#element2 { 
 
    position: relative; 
 
} 
 
#element2 { 
 
    background-color: green; 
 
    height: 50px; 
 
    width: 50px; 
 
}

<!doctype html> 
 
<html class="no-js" lang=""> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <title></title> 
 
    <meta name="description" content=""> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 

 
    <link rel="apple-touch-icon" href="apple-touch-icon.png"> 
 
    <!-- Place favicon.ico in the root directory --> 
 

 
    <link rel="stylesheet" href="css/normalize.css"> 
 
    <link rel="stylesheet" href="css/main.css"> 
 
    <script src="js/vendor/modernizr-2.8.3.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <!--[if lt IE 8]> 
 
      <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> 
 
      <![endif]--> 
 

 
    <div id="element1">Move square</div> 
 
    <button id="reset">Reset</button> 
 
    <div id="element2"></div> 
 

 

 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
    <script src="js/ui.js"></script> 
 
    <script src="js/main.js"></script> 
 

 
</body> 
 

 
</html>

來源

2015-04-05 21:41:33 LiverpoolOwen

謝謝你呢！我也會檢查你的解決方案，稍後......謝謝！ – 2015-04-05 21:48:55

如何在窗口中更改jQuery的動畫值調整

回答

相關問題