Lottie影片和懸停：更簡單的方法？

我是編碼新手，并且在處理實際專案時嘗試盡可能多地學習。

我有 8 個 div，每個 div 都有它自己的 lottie 影片（每個影片都有它的 .json 檔案）。我想在懸停時播放相應 div 的影片。

所以我的 html 看起來像這樣

var containerHorloge = document.getElementById("anim-horloge");
var containerBalance = document.getElementById("anim-balance");
var containerOrdi = document.getElementById("anim-ordi");
var containerFamille = document.getElementById("anim-famille");
var containerLunettes = document.getElementById("anim-lunettes");
var containerBonhomme = document.getElementById("anim-bonhomme");
var containerCoupes = document.getElementById("anim-coupes");
var containerPinpoint = document.getElementById("anim-pinpoint");

var animHorloge = bodymovin.loadAnimation({
    container:  containerHorloge,
    renderer: 'svg',
    autoplay: false,
    loop: true,
    path : '/wp-content/uploads/svg/anim-horloge.json'

});
var animBalance = bodymovin.loadAnimation({
    container:  containerBalance,
    renderer: 'svg',
    autoplay: false,
    loop: true,
    path : '/wp-content/uploads/svg/anim-balance.json'
});
var animation = bodymovin.loadAnimation({
    container:  containerOrdi,
    renderer: 'svg',
    autoplay: false,
    loop: true,
    path : '/wp-content/uploads/svg/anim-ordi.json'
});
var animation = bodymovin.loadAnimation({
    container:  containerFamille,
    renderer: 'svg',
    autoplay: false,
    loop: true,
    path : '/wp-content/uploads/svg/anim-famille.json'
});
var animation = bodymovin.loadAnimation({
    container:  containerLunettes,
    renderer: 'svg',
    autoplay: false,
    loop: true,
    path : '/wp-content/uploads/svg/anim-lunettes.json'
});
var animation = bodymovin.loadAnimation({
    container:  containerBonhomme,
    renderer: 'svg',
    autoplay: false,
    loop: true,
    path : '/wp-content/uploads/svg/anim-bonhomme.json'
});
var animation = bodymovin.loadAnimation({
    container:  containerCoupes,
    renderer: 'svg',
    autoplay: false,
    loop: true,
    path : '/wp-content/uploads/svg/anim-coupes.json'
});
var animation = bodymovin.loadAnimation({
    container:  containerPinpoint,
    renderer: 'svg',
    autoplay: false,
    loop: true,
    path : '/wp-content/uploads/svg/anim-pinpoint.json'
});


$(".section-cases .vc_col-sm-3.div-horloge").on('mouseenter', function(event) {
    event.preventDefault();
    onEnter:animHorloge.play();

})

<div class="vc_col-sm-3 div-horloge"></div>
<div class="vc_col-sm-3"></div>
<div class="vc_col-sm-3"></div>
<div class="vc_col-sm-3"></div>
<div class="vc_col-sm-3"></div>
<div class="vc_col-sm-3"></div>
<div class="vc_col-sm-3"></div>
<div class="vc_col-sm-3"></div>

同樣，我對編碼還很陌生，并且知道一些基礎知識，但對回圈、陣列等知之甚少。

非常感謝！

編輯

所以這就是我讓它作業的方式（感謝@sam-osb的回答）

var lottiePlayer = document.getElementsByTagName("lottie-player");

$(lottiePlayer).on('mouseenter', function(event) {
    console.log(this);
    this.setDirection(1)
    this.play()

}).on('mouseleave', function(event) {
    this.setDirection(-1)
    this.play()
});

<div class="box">
        <lottie-player src="/wp-content/uploads/svg/SOURCE_HERE.json"></lottie-player>
        <p>Lorem ipsum</p>
</div>
<div class="box">
        <lottie-player src="/wp-content/uploads/svg/SOURCE_HERE.json"></lottie-player>
        <p>Lorem ipsum</p>
</div>

問題是我想將滑鼠懸停在 PARENT (.box div ...)

所以我試過：

$(lottiePlayer).closest(".box")on('mouseenter', function(event) {
    $(this).find(lottiePlayer).play();

})

// or

$(lottiePlayer).closest(".box")on('mouseenter', function(event) {
    this.find(lottiePlayer).play();

})

// or even 

$(lottiePlayer).closest(".box")on('mouseenter', function(event) {
    lottiePlayer.play();

})

// and then

$(".box")on('mouseenter', function(event) {
  this.find(lottiePlayer).play();
 

})

它總是回傳 .play() 不是一個函式......

我知道我在做一些愚蠢的錯誤，但不知道是什么 LOL

uj5u.com熱心網友回復：

您可以將此庫與 'hover' 屬性一起使用以在懸停時播放影片，并讓它為您加載影片，以便您可以洗掉所有 bodymovin 呼叫：

https://github.com/LottieFiles/lottie-player

只需在headHTML 檔案中包含 CDN：

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

然后宣告你的元素：

<lottie-player src="URL" hover></lottie-player>

uj5u.com熱心網友回復：

因此，在此處和其他問題中獲得非常有用的答案后，正確的方法是：

var lottiePlayer = document.getElementsByTagName("lottie-player");

$(".vc_col-sm-3").on('mouseover', function(event) {
  $(this).find(lottiePlayer)[0].play();

});

標籤：javascript jQuery 乐蒂

上一篇：如何解決Puppeteer中的此錯誤我嘗試使用Puppeteer填寫表單

下一篇：作用于創建的div變數