第二次点击时没有发生 Jquery 动画

标签 jquery css animation

我创建了一个动画,它在单击时从右侧滑动一个 div。它有一个关闭按钮,可以将其恢复到原始位置。但是我无法重复那个动画。即,在第二次单击时动画不起作用。这是 jquery,我试过了..

    <script type="text/javascript">
$(document).ready(function() {

$elem1 = $('#myFirstElement');
$elem2 = $('#mySecondElement');
var scrollState = 'top';

$("#ongoing").toggle(function(){ 

    var scrollPos = $(window).scrollTop();

    if( ( scrollPos != 0 ) && ( scrollState === 'top' ) ) {
        $elem1.stop().animate({right: '+1px'}, 800);
             scrollState = 'scrolled';
    }       
    else if( ( scrollPos === 0 ) && ( scrollState === 'scrolled' ) ) {
         $elem1.stop().animate({right: '-=100%'}, 800);
        scrollState = 'top';
    }

});
});

</script>

请指教如何解决这个问题。

最佳答案

您需要使用点击事件处理程序而不是使用切换方法:

$("#ongoing").click(function(){
//             ^^ not toggle

当你有条件地改变 scrollState

关于第二次点击时没有发生 Jquery 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31715144/

相关文章:

reactjs - 如何在使用 zindex 的原生 react 中为淡入淡出设置动画?

jquery - zRSSFeed - 从带有股票动画 + jQuery Mobile (PhoneGap) 的菜单中选择 RSS 提要?

asp.net - 服务器事件后禁用和启用 jquery 中的按钮

javascript - SetTimeout 在 jQuery 中不能正常工作

css - 高度,最小高度不起作用

user-interface - 在 Qt 中为围绕屏幕移动的圆圈制作动画的最佳方法?

javascript - JQuery "Constrain"插件 - 奇怪的 Javascript 错误

jquery - 有没有办法优化 chrome 的视差滚动?

html - 如何将元素调整为全高

c# - 在 XAML ProgressBar 的 ValueChanged 事件上绑定(bind)平滑动画