jQuery動畫只有左右一次發生一次

我試圖在我的網站的旋轉木馬上播放一些內容，以便它根據按下的按鈕向左或向右移動。這是我的示例代碼：jQuery動畫只有左右一次發生一次

HTML

<div class="red-bg"> 
    <div class="blue-bg" id="toAnimate"> 
    <p>Some text</p> 
    <p>Some other text</p> 
    <button id="leftButton">left</button> 
    <button id="rightButton">right</button> 
    </div> 
</div>

CSS

.red-bg { 
    background: red; 
    height: 250px; 
    margin-left: 300px; 
    padding: 20px; 
    width: 250px; 
} 

.blue-bg { 
    background: blue; 
    position: relative; 
}

$(document).ready(function() { 

    function animateLeft() { 
    $("#toAnimate").animate({ 
     opacity: 0, 
     right: 100 
    }, 500, function() { 
     $('#toAnimate').css('right', '0'); 
     $('#toAnimate').css('opacity', '1'); 
    }); 
    } 

    function animateRight() { 
    $("#toAnimate").animate({ 
     opacity: 0, 
     left: 100 
    }, 500, function() { 
     $('#toAnimate').css('left', '0'); 
     $('#toAnimate').css('opacity', '1'); 
    }); 
    } 

    $('#leftButton').click(function() { 
    animateLeft(); 
    }); 

    $('#rightButton').click(function() { 
    animateRight(); 
    }); 

});

這裏是鏈接我CodePen：http://codepen.io/leofontes/pen/NRgOxb

基本上，我的情況是，如果我按左按鈕第一，它的工作原理和動畫播放至左側，但是如果我按權，則左停止工作，只有衰出去但不走（左側仍然有效）。

任何想法爲什麼這種行爲正在發生或我可以如何解決它？謝謝！如果需要更多的信息，請讓我知道

來源

2016-09-28 leofontes

你只是改變代碼'toAnimateLeft'在'$（ '＃toAnimate'）的CSS（ '左'， '0'）;'和'左：-100 ' –

爲這兩種方法添加這一行'$（「＃toAnimate」）。attr（'style'，''）;' –

問題： 在你的代碼試圖從右到左100像素，從左到右

首先，您刪除左側的風格在你的元素或做這樣的

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>JS Bin</title> 
<script src="https://code.jquery.com/jquery-2.0.3.js"></script> 

</head> 
<body> 
    <div class="red-bg"> 
     <div class="blue-bg" id="toAnimate"> 
     <p>Some text</p> 
     <p>Some other text</p> 
     <button id="leftButton">left</button> 
     <button id="rightButton">right</button> 
     </div> 
    </div> 
</body> 
</html>

。

JAVA SCRIPT

$(document).ready(function() { 

    function animateLeft() { 
    $("#toAnimate").animate({ 
     opacity: 0, 
     left: -100 
    }, 500, function() { 
     $('#toAnimate').css('left', '0'); 
     $('#toAnimate').css('opacity', '1'); 
    }); 
    } 

    function animateRight() { 
    $("#toAnimate").animate({ 
     opacity: 0, 
     left: 100 
    }, 500, function() { 
     $('#toAnimate').css('left', '0'); 
     $('#toAnimate').css('opacity', '1'); 
    }); 
    } 

    $('#leftButton').click(function() { 
    animateLeft(); 
    }); 

    $('#rightButton').click(function() { 
    animateRight(); 
    }); 


});

來源

2016-09-28 18:47:09

非常明顯，謝謝 – leofontes

爲'$（「＃toAnimate」）添加此行。attr '風格'，''）;'這兩種方法..因爲造型問題..這是你的確切解決方案@ leofontes –

jQuery動畫只有左右一次發生一次

回答

相關問題