盘旋多实例格时独特的声音 [英] unique sound when hovering multiple instance div

问题描述

我试图发挥独特的声音我合一的div元素悬停具有一定的类（ .trigger ）。
我的问题是，我有这个DIV类，这意味着无论哪个我悬停div的，在（相同）声音播放的多个实例。

我的 dreamscenario 的是，那只要下一个DIV悬停（希望下一个播放声音），任何previous声停止（我用的是1-声音文件2秒长）。

我已经包括通过DIV我试图作为触发，使用HTML5在我的音频。

 ＆LT; D​​IV CLASS =触发＆GT;
    ＆LT;音频ID =声音preLOAD =自动＆GT;
        ＆lt;信源SRC =sound1.mp3＆GT;＆LT; /源＆GT;
        ＆lt;信源SRC =sound1.mp3＆GT;＆LT; /源＆GT;
    ＆LT; /音频＆GT;
＆LT; / DIV＆GT;＆LT; D​​IV CLASS =触发＆GT;
    ＆LT;音频ID =声音preLOAD =自动＆GT;
         ＆lt;信源SRC =sound2.mp3＆GT;＆LT; /源＆GT;
         ＆lt;信源SRC =sound2.mp3＆GT;＆LT; /源＆GT;
    ＆LT; /音频＆GT;
＆LT; / DIV＆GT;
 

和我使用这个脚本：

  $（触发）
  $（本）。每个（函数（一）{
    如果（ⅰ！= 0）{
      $（＃声）
        。克隆（）
        .attr（ID，声音+ I）
        .appendTo（$（本）.parent（））;
    }
    $（本）。数据（CNT我）;
  }）
  $（本）.mouseenter（函数（）{
    $（＃声+ $（本）。数据（CNT））[0] .play（）;
  }）;
$（＃声），ATTR（ID，sound0）;
 

我很亲切任何帮助和更好的主意来实现这个:)
我是一个可怕的新手 - 对不起为

。

解决方案

就这么简单？

  $（'触发'）。悬停（
    功能（）{
        听起来= $（本）。儿童（）[0];
        sound.play（）;
    }，函数（）{
        sound.pause（）;
        sound.currentTime = 0;
    }
）;
 

在线演示： http://jsfiddle.net/oscarj24/VwSLj / 5 /

i'm trying to play a unique sound as i hover one div element with a certain class (.trigger). my problem is, that i have multiple instances of this div class, which means no matter which of the divs i hover, the (same) sound is played.

my dreamscenario would be, that as soon as the next div is hovered (and hopefully the next sound is played), any previous sound stops (i am using soundfiles that are 1-2 seconds long).

i have included my audio via html5 within the div i am trying to use as a trigger.

<div class="trigger">
    <audio id="sound" preload="auto">
        <source src="sound1.mp3"></source>
        <source src="sound1.mp3"></source>
    </audio>
</div>

<div class="trigger">
    <audio id="sound" preload="auto">
         <source src="sound2.mp3"></source>
         <source src="sound2.mp3"></source>
    </audio>
</div>

and i'm using this script:

$(".trigger")
  $(this).each(function(i) {
    if (i != 0) { 
      $("#sound")
        .clone()
        .attr("id", "sound" + i)
        .appendTo($(this).parent()); 
    }
    $(this).data("cnt", i);
  })
  $(this).mouseenter(function() {
    $("#sound" + $(this).data("cnt"))[0].play();
  });
$("#sound").attr("id", "sound0");

i'd be gracious for any help and better idea to achieve this :) i'm a terrible novice — sorry for that.

解决方案

Simple as that?

$('.trigger').hover(
    function() {
        sound = $(this).children()[0];
        sound.play();
    }, function() {
        sound.pause();
        sound.currentTime = 0;
    }
);

Live Demo: http://jsfiddle.net/oscarj24/VwSLj/5/

这篇关于盘旋多实例格时独特的声音的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！