在我的窗口屏幕外停止動畫

這是工作正常左側的動畫div不能從左側出去，但它不能與右側div在窗口屏幕外面工作。在我的窗口屏幕外停止動畫

我的html代碼：

<body> 
    <div class="block"></div> 
</body>

我的CSS代碼：

div { 
    position: absolute; 
    background-color: #abc; 
    left: 50px; 
    top:50px; 
    width: 90px; 
    height: 90px; 
    margin: 5px; 
}

我jQuery代碼

$("body").keydown(function(e) { 
var width = $(window).width(); 
var heigth = $(window).height(); 
if(e.keyCode == 37) { // left 
    if (parseInt($('.block').css('left')) >= 50) {  
     $('.block').animate({left: '-=50'},"slow"); 
    } 

} 
else if(e.keyCode == 39) { // right 
    if (parseInt($('.block').css('left')) <= width) {  
     $(".block").animate({left: "+=50px"},'slow'); 

    } 

} 

});

在此先感謝。

來源

2013-10-18 jignesh kheni

你忘了，以減少'由50 – Teemu

width'我嘗試，但它也沒有工作 –

從寬度減少50，並檢查如果結果寬度大於0的左側和小於窗口寬度爲正確，然後動畫！ –

提高一些代碼來@ lukiffer的答案。

//... 
else if(e.keyCode == 39) { // right 
    if (parseInt($('.block').css('left')) <= (width-150)) {  
     $(".block").animate({left: "+=50px"},'slow'); 

    } 

} 
//...

來源

2013-10-18 08:32:24

將當前的left值與窗口寬度進行比較時，未添加作爲函數結果添加的50像素，因此您將超出窗口寬度。

你也應該佔.block元素本身的寬度

//... 
else if(e.keyCode == 39) { // right 
    if ((parseInt($('.block').css('left')) + 50 + $('.block').width()) <= width) {  
     $(".block").animate({left: "+=50px"},'slow'); 

    } 

} 
//...

來源

2013-10-18 08:11:44 lukiffer

在我的窗口屏幕外停止動畫

回答

相關問題