Repeater Img Hover Transitions

Ask the community
,
1

Hello,
Right now I have a repeater (linked to a database) where if you hover over the image, it shows a grey filter (box1) and text ontop (text11). (Code below)

export function container1_mouseIn_1(event, $w) {
$w(‘#box1’).show();
$w(‘#text11’).show();
}

export function container1_mouseOut_1(event, $w) {
$w(‘#box1’).hide();
$w(‘#text11’).hide();
}

If I use show(“fade”, {duration:100}); and hide(“fade”, {duration:100}); though, box1 and text 11 never gets hidden if I move my mouse over it too fast, and remains until I hover over and out again slower. Is there a way to have it so that this doesnt happen and that itll always hidden if the mouse is outside of the container?

Thanks

2

Can someone help me with this?

3

You could use this example:

Tweak it a little so that is uses hide and show, and insert it into your repeater’s onItemReady function.

4

Hello, Thanks! I’ve almost got it but I can’t seem to get it working in a repeater. This is what I have so far, and it gives the error ‘toggleFold’ is not defined. Do you maybe know how to fix this?

export function repeater1_itemReady($item, itemData, index) {
function toggleFold() {
let $fold = $w(‘#testingblock’ + index);
let $arrowDown = $w(‘#arrowDown’ + index);
let $arrowRight = $w(‘#arrowRight’ + index);
// toggle the fold at the index
if ($fold.hidden) {
$fold.show(“fade”, {duration:100});
$arrowDown.show(“fade”, {duration:100});
$arrowRight.show(“fade”, {duration:100});
}
else {
$fold.hide(“fade”, {duration:100});
$arrowDown.hide(“fade”, {duration:100});
$arrowRight.hide(“fade”, {duration:100});
}
}

export function headerBox1_mouseIn(event) {
toggleFold(1);
}

export function headerBox1_mouseOut_1(event) {
toggleFold(1);
}

5

If you’re declaring the function inside the itemReady scope then you can only call it inside the itemReady scope, so move your mouseIn and mouseOut event handlers into the itemReady as well, and change $w to $item for any repeater objects.