How to apply multiple 'let fadeoptions' to different elements

Ask the community
,
1

Hello again folks!
With help from this forum, I got this code below to work nicely.

Not being a coder with limited understanding of code, I’m now wondering how I possible could apply different durations to each element instead of just having one value for all?

$w.onReady(function () {
let fadeOptions = {
  "duration":   400,
  "delay":      0
};

$w("#anchorx"). onViewportLeave((event) => {
        $w('#wildlifelogomain').show("fade", fadeOptions);
    });

$w("#anchorx").onViewportEnter((event) => {
        $w('#wildlifelogomain').hide("fade", fadeOptions);
    });

$w("#anchorx").onViewportLeave((event) => {
        $w('#donatebuttonfull').hide("fade", fadeOptions);
    });

$w("#anchorx").onViewportEnter((event) => {
        $w('#donatebuttonfull').show("fade", fadeOptions);
    });

$w("#anchorx").onViewportLeave((event) => {
        $w('#donatebutton').show("fade", fadeOptions);
    });

$w("#anchorx").onViewportEnter((event) => {
        $w('#donatebutton').hide("fade", fadeOptions);
    });

$w("#anchorz").onViewportLeave((event) => {
        $w('#wildlifelogomaincenter').hide("fade", fadeOptions);
    });

$w("#anchorz").onViewportEnter((event) => {
        $w('#wildlifelogomaincenter').show("fade", fadeOptions);
    });
});

As always, I appreciate every helpful input!!! :slight_smile:

Cheers, Milan

2

What you can do is something like this for each of the methods

let fadeOptions={
    "duration":400,
     "delay":0
};
$w("#anchorx").onViewportLeave((event)=>{
fadeOptions.duration = 300
$w('#wildlifelogomain').show("fade",fadeOptions);

});

But do note that this will change the duration of the faceOptions, also for the other methods

Another way to do it would be to make different options for the different durations, wich is not a bad idea if you only have a few different durations, and no other special effects.

3

Hi Simen, thanks so much again for you input!
Not being a coder, how would I create different options for different durations?
Not asking you to write all the code for me, maybe a push in the right direction, so I understand how I would go about it…

4

@daflexxx

For example

let fade400={
    "duration":400,
    "delay":0
 };
 
 let fade600={
    "duration":600,
    "delay":0
 };
 
 let fade1000={
    "duration":1000,
    "delay":0
 };
 
 
$w("#anchorx"). onViewportLeave((event) => {
    $w('#wildlifelogomain').show("fade", fade400); //Has duration 400ms
});

$w("#anchorx").onViewportEnter((event) => {
    $w('#wildlifelogomain').hide("fade", fade600); //Has duration 600ms
});


$w("#anchorx").onViewportLeave((event) => {
    $w('#donatebuttonfull').hide("fade", fade1000); //Has duration 1000ms
});
5

@simen

I see, that makes so much more sense to me now… I wasn’t sure if the ‘fadeOptions’ command could be altered and if, even how.

Haven’t tried it yet but am confident it’ll work.
Again, thank you so much for your help!!!
Highly appreciated :blush: