I have a hover effect on images, how can I simplify my code

Ask the community
,
1

Basically I want each one to move as I hover. I have the functionality but would like a cleaner way to feed in the currently hovered image and animate it without having to create a event for each element.

1283×518 454 KB

import wixAnimations from 'wix-animations';
import { timeline } from 'wix-animations';
let selected = $w("#image2 , #image3, #image4 , #image5, #image6 , #image7, #image8 , #image9, #image10 , #image11, Wood");

$w.onReady(function () {
 // Write your JavaScript here

    $w("#image2").onMouseIn((event) => {
 const move = { y: -60, duration: 600, easing: 'easeOutCirc' };
            timeline()
 .add($w(("#image2")), move)
 .play()

});
$w("#image2").onMouseOut((event) => {
 const move = { y: 0, duration: 600, easing: 'easeOutCirc' };
            timeline()
 .add($w(("#image2")), move)
 .play()

});

 // To select an element by ID use: $w("#elementID")

 // Click "Preview" to run your code
});
2

Perhaps this way?

$w('Image').onMouseIn((event)=>{
    console.log(event)
    console.log(event.target)
    console.log(event.target.id)
    
    selectedIMG = event.target.id
    
    const move = { y:-60, duration:600, easing:'easeOutCirc'};
    timeline().add($w('#'+selectedIMG), move).play()
});
3

That works beautifully dima. Only yesterday I was attempting to ues your hide header code to no success. Anyway thanks for the help, it works a charm!

4

For anyone wanting full code for hover interaction on a set of elements (images) here it is.

pastebin. com/bknxR2tc

5

@cmjpask No problem! Good luck and happy coding.