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', ''); ' –

Проблема: в коде вы пытаетесь справа налево 100px и слева направо

Во-первых, вы удалите свой левый стиль в вашем элементе или сделать как этот

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 ('style', ''); 'оба метода .. из-за проблемы с дизайном .. это ваше точное решение @ leofontes –

jQuery Анимация влево и вправо происходит только один раз

ответ

Смежные вопросы