Show/hide - Basic functionality

[majab93208718]

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.

[ClayUUID · Accepted solution]

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.

[majab93208718]

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?

[ClayUUID]

_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.

[majab93208718]

Well, I've put them here:

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;
console.log("mouseover");
});

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

and it does happen: I do get mouseover written in the browser console once I mouseover and I do get mouseout written in the browser console once I mouseout.

[majab93208718]

P.S.

I've made another test on a clean file with only 3 simbols/objects (IN_fig, IN-mem and IN-btn) and it works as it should! Thank you!

This means something must be wrong with my entire file. Would it be possible that I have too many elements? Would you mind having a look at it at www.ortodroma.si/main/marketing. Could that be too many elements?

For your info:

• The LinkedIn only area is what in my initial example I call IN_btn.
• The 3 little squares are IN_mem (mem for members)
• The text is IN_fig (fig for figures)
• Try mouseovering over the LinkedIn only area and you'll see the problem. Figures showing for a second and disapperaing. Members disappearing for a second and apperaing again.
• The rest of the infographics is a mess. Please do not look at it.

Or should I open another thread for this?

In any case, thanks for your help!!

[majab93208718]

Hi, my post was just marked as spam and my latest replay removed. What I tried to tell you is that I've opened a clean file and everything works as it should. Thank you for helping me. 

I guess the problem is my entire file and I'll have to figure it out what is going on in there.

In any case, with your help at least I know I'm on the right way.