jQuery动画的一些问题

我正在第一次使用jQuery，我试图在div上制作动画。。第一个动画顺利，但第二个（当我要到div返回到它只是重置原来的位置，我不能弄明白jQuery动画的一些问题

我的jQuery：

$(document).ready(function() { 


// Row one - column one. 
$(document).on('click', '#row_one_column_one', function() { 

    $('#row_one_column_one').animate({ 
     left: '35%', 
     opacity: '0.9', 
     height: '500px', 
     width: '500px' 
    }); 

    $('#row_one_column_one_button').fadeIn(750); 
}); 

$(document).on('click', '#row_one_column_one_button', function() { 
    $('#row_one_column_one_button').fadeOut(250); 
    $('#row_one_column_one').animate({ 
     left: '100px', 
     opacity: '0.5', 
     height: '250px;' 
    }); 
}); 


});

我也做了一个小提琴：https://jsfiddle.net/c1he2vb8/4/

请饶了我吧，我还是个菜鸟

来源

2016-09-21 Dennis Castelijns

只是一个建议。当你熟悉jquery时[gsap]（http://greensock.com/gsap）。它可以用比jquery更少的代码做更多的事情。快乐的编码！ –

这是因为事件delgation（冒泡），父DIV点击的触发和重新执行动画的事件，那为什么它被重置的。

为了解决这个问题，你需要添加e.stopPropagation()到点击按钮将停止代表团与仅执行“点击我”按钮的点击方法：

$(document).on('click', '#row_one_column_one_button', function(e) { 
     e.stopPropagation(); 
     $('#row_one_column_one_button').fadeOut(250); 
     $('#row_one_column_one').animate({ 
      left: '100px', 
      opacity: '0.5', 
      height: '250px;' 
     }); 
    });

检查事件传播的文档：https://developer.mozilla.org/en/DOM/event.stopPropagation

来源

2016-09-21 08:43:40 KAD

它现在有效，谢谢。我会查看该文件。 –

你的问题是，你的第一个动画后，两个jQuery函数被触发，因为他们躺在对方。

我删除一个和添加使用jQuery活性类：

// Row one - column one. 
    $(document).on('click', '.test', function() { 

     $(this).animate({ 
      left: '35%', 
      opacity: '0.9', 
      height: '500px', 
      width: '500px' 
     }); 

     $(this).addClass("active"); 
    }); 

    $(document).on('click', '.test.active', function() { 
     $(this).animate({ 
      left: '100px', 
      opacity: '0.5', 
      height: '250px;', 
      left: '0%', 
        width: '14%', 
        height: '100%', 
      opacity: '1' 
     }); 
     $(this).removeClass("active"); 
    });

https://jsfiddle.net/c1he2vb8/11/

来源

2016-09-21 08:47:49

jQuery动画的一些问题

回答

相关问题