How to fade out after fading in?

[Rocketman]

Hello,

I have an image that fades in when a piece of text is hovered, but as soon as the cursor is moved off the text the image rapidly flicks off.

Is there any way to set the image to fade out over the same time period as it fades in when the cursor is moved?

Many thanks

T.

[Rocketman]

(not sure if it makes any difference, but the image is on a separate pop-up layer. I used the 'mouse-over' options for the piece of text (Web Animation dialogue box) and set it to show the applicable pop-up layer, with the associated effect of 'fade in'. I'm using Xara Web Designer Premium 12)

[gwpriester]

To achieve a fade in fade out, http://gwpriester.xara.hosting/fade-in-out/

Place a rectangle over the image the same color as the background. Delay the fade. A fade out is really just a fade in of the background.

[Egg Bramhill]

Try this:

LINK

[Acorn]

Try this:
LINK

Egg, it is a nice solution that makes use of two Xara side-effects.

The first is any object one the MouseOver layer that overlaps with one on the MouseOff layer by more that 50% acts as if a rollover effect has been applied. Normally such a rollover is through setting up a link on the MouseOff object.

The second side-effect creates a "link" is achieved through of the Web Animation mouse over effect. I enjoy use Rotate-Fade but not all effects are symmetrical and cut-off dramatically. The interesting point is these symmetric effects are not evident when there is no MouseOver object.

Instead of a 99% transparency (100% in Xara365 works), I use a solid colour rectangle and apply Flat Screen (Bleach). With a black colour, the object underneath is rendered as before. Change the colour and you get a tint effect for free.

Finally, in passing, if you create an image and set up a 0% Linear, Repeating Transparency with a (0, -1) Profile to slice the image into lots of bars, you can clone this, place on the MouseOver layer and displace the bars to fill in the missing parts then when you use the above effects, you can display your priceless image in a joined up version that is much harder to copy.

Acorn

[siran]

Here is a method using JQuery.
It has a placeholder on the pop-up layer that calls a function (fadeThisPopup) when the mouse enters.
The function is passed two parameters, one identifies the element (this) and the other defines the fade-out-time in milliseconds (1000).
On top of the placeholder is a clone of the object that opens the mouse-over-layer (at the exact same position). This is required since otherwise the fade-out would start immediately.
It is necessary that the placeholder completely surrounds the object, so that in whichever direction the mouse leaves the object it will always enter the area of the placeholder.
The placeholder has the name UsesJQuery applied to ensure JQuery is loaded.
The function is defined in the page header.

It looks a little strange if the pop-up layer contains stickies because these appear and disappear instantly.

It has been a lot of trial an error to get it working in V11. (Also works in V10 except for the stickie.)

Give it a try if you like.

[Rocketman]

Hi All,

Thanks for the suggestions so far. I am trying them all out, but some of the terminology is going over my head a little, so it might take me a while.

Just to elaborate a tad on my original post:

The text is separate to the image. There is a page with 4 items of text on it (single words) and then elsewhere on the page a square image. When the text is hovered with the mouse/cursor I have a different image that fades in over the original (static) square image (exactly the same size, so that is looks as if the original image is changing as the text is hovered). There are 4 different images, one for each bit of text.

So for example when text line x is hovered over, corresponding image x is displayed (fades in) then when text line y is hovered over, image y is displayed in the same place.

It is kinda hard to explain using words. The website is live, and I could share the link if that would help so you can see exactly what I mean?

Thanks again for your help. Hopefully one of the above responses will do the job.

[gwpriester]

Then you want layers. The text links to the appropriate layer. Link each word of text to the appropriate layer. Use the Web Animation > Show Pop-up Layer

In the attached, there are three words on the MouseOff layer, CIRCLE, SQUARE, STAR and three layers with the same name. Each layer contains the appropriate shape.

The text is linked to the appropriate layer with a Web Animation > Show Pop Up Layer.

[Egg Bramhill]

Fine Gary but Rocketman wants the image to fade-out too, not just instantly disappear.

Using Sirans method would this suit your needs?

LINK

[Egg Bramhill]

Instead of a 99% transparency (100% in Xara365 works), I use a solid colour rectangle and apply Flat Screen (Bleach). With a black colour, the object underneath is rendered as before. Change the colour and you get a tint effect for free.

Cheers Acorn. I use 99% transparency so that I'm still able to select the object in Xara. A drawback with 100% transparency is you need to go to wire view to select it.