Question

我有一个div .move，按钮开始从左向右移动＆＃34;去div？＃34;点击。

然后我在内容div的中心有两个div .sound，带有音频元素。

我希望当div .move到达.sound div时，.sound div中的音频开始播放。

但是，无论何时.move div到达.sound元素，.sound div中的每个音频元素都会开始播放？

jQuery的：

$( "#div" ).click(function() {

Answer 1

https://jsfiddle.net/popnoodles/dda5z70r/5/

检查每个动画步骤的碰撞。

添加您的代码以播放我添加了一个类以便直观地显示它的声音。

注意我将ID bar添加到移动的栏中，因为在DOM中搜索ID比使用类更快。如果您有多个移动条，我可以改变它。

$( "#go" ).click(function() {
  var stop = $(".stop").offset().left;
  var obj = document.getElementById("audio"); 

  // how to say whenever .move div arrives at .sound element, the sound associated to that .sound div starts to play?
  //obj.play(); 
  $( "#bar" ).animate({
    opacity: 0.25,
    left: stop-($(".stop").width()+$(this).width()),
  }, {
    duration: 5000, 
    step: function(){
        $('.sound').each(function(){
            if (collision($(this), $('#bar'))){
            $(this).addClass('playme');
        } else{
            $(this).removeClass('playme');
        }
            });

  }, complete: function() {
    $(this).css('left',0);
    $(this).css('height','100%');

  }});


});

function collision($div1, $div2) {
      var x1 = $div1.offset().left;
      var r1 = x1 + $div1.width();
      var x2 = $div2.offset().left;
      var r2 = x2 + $div2.width();
      if (r1 < x2 || x1 > r2) return false;
      return true;
 }

播放div中的所有音频

1 个答案: