Skip to main content
M
majab93208718
Inspiring
March 29, 2020
Answered

Show/hide - Basic functionality

  • March 29, 2020
  • 1 reply
  • 1412 views

Hi, any idea why this code does not work as I think it should?

 

 

var _this = this;

_this.IN_mem.visible = true;
_this.IN_fig.visible = false;

stage.enableMouseOver(3);
_this.IN_btn.on('mouseover', function()
{
_this.IN_mem.visible = !_this.IN_mem.visible;
_this.IN_fig.visible = !_this.IN_fig.visible;
});

stage.enableMouseOver(3);
_this.IN_btn.on('mouseout', function()
{
_this.IN_mem.visible = !_this.IN_mem.visible;
_this.IN_fig.visible = !_this.IN_fig.visible;
});

 

 

What I would like is to have IN_mem visible and IN_fig invisible at the beginning.

 

Then when I mouseover the IN_btn I would like the reverse to happen: to have IN_mem invisible and IN_fig visible.

 

Then when I mouseout I would like to have the initial position: IN_mem visible and IN_fig invisible.

 

But what happens is:

 

When I mouseover:

  • IN_mem disappears for a second and at the same time IN_fig appears for a second. Then they both go to their previous stages (IN_mem becomes visible again; IN_fig becomes invisible again)
  • But I would like them to STAY (IN_mem invisible and IN_fig visible) in their new statue for as long as I mouseout.

When I mouseout nothing happens.

 

I do not understand that behaviour.

Isn't 

 

 

_this.XXX.visible = !_this.XXX.visible;

 

 

supposed to do the oposite of the current visibility status and STAY in that status. Not return to the previous status after one second?

 

I also don't understand why nothing happens when I mouseout. But that's a secondary question, I suppose. I believe I should first be able to understand why mouseover isn't working as I think it should.

 

Thanks for any hint that you might have.

This topic has been closed for replies.
Correct answer ClayUUID

You don't need to enable mouseover twice.

 

You only need to use the _this alias in your event handler functions. It doesn't hurt to use it everywhere, but it's unnecessarily verbose.

 

You shouldn't be using the ! operater at all, because that just confuses things. You don't want a toggle function, you want each event to set your objects to a specific visibility state. Just use true and false.

1 reply

C
ClayUUIDCorrect answer
Legend
March 29, 2020

You don't need to enable mouseover twice.

 

You only need to use the _this alias in your event handler functions. It doesn't hurt to use it everywhere, but it's unnecessarily verbose.

 

You shouldn't be using the ! operater at all, because that just confuses things. You don't want a toggle function, you want each event to set your objects to a specific visibility state. Just use true and false.

M
majab93208718Author
Inspiring
March 29, 2020

Hi, thanks so much for your reply.

I've changed my code to (unfortunatelly I don't understand what you mean by _this alias, but I guess it's not a priority at the momemnt):

 

var _this = this;

_this.IN_mem.visible = true;
_this.IN_fig.visible = false;

stage.enableMouseOver(3);

_this.IN_btn.on('mouseover', function()
{
_this.IN_mem.visible = false;
_this.IN_fig.visible = true;
});

_this.IN_btn.on('mouseout', function()
{
_this.IN_mem.visible = true;
_this.IN_fig.visible = false;
});

 

When I run this code, same thing happens as before:

 

When I mouseover:

  • IN_fig becomes visible for a second and disapperas again. At the same time IN_mem becomes invisible for a second and appears again.
  • Arent' they suppose to STAY in their new visibility state till I mouseout?

 

When I mouseout:

  • Nothing happens.

 

It's a strange behaviour, isn't it? Do you have any idea what might be going wrong?

 

C
ClayUUID
Legend
March 29, 2020

_this is an alias to this.

 

What you're descibing shouldn't be happening. Try putting in your event handler functions:

console.log("mouseover");

and

console.log("mouseout");

I'll trust you to know which one goes where.

 

Then open the browser console (F12) while your page is running and you'll be able to see when each event handler fires.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices