[Pro] Rollover Fade

Freeway
1

Hi guys,

I have had a search but can’t seem to find an answer to this. How can I make my rollovers fade between the images, rather than just appear and disappear sharply?

Thanks

Simon

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

Take a look at the TransitionFX Action. That can use Scriptaculous’ Effect.Fade to animate transitions (also many other transitions, too).

Walter

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

Thanks Walter,

But is there any way to make the image go back to it’s original state when I move the mouse off of it, or ‘mouse out’?

Simon

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

I haven’t found one yet. That was something that prompted me to write the Scripty Accordion, because I couldn’t figure out a way to build an accordion effect with TransitionFX.

You could use the Observer Action and some hand-coded CSS to make this effect. Assuming you want your chosen element to have a gray background and all the others to have white, you could do something like this:

  1. Create a base button element (graphic or HTML, shouldn’t matter) and apply the Observer Action to it. Choose ‘scriptaculous-packed’ from the Library picker.
  2. In the first DOM Event field, enter ‘mouseover’ (again, without the quotes) and in the Function Body button, enter this.morph('background-color: #ccc');

Okay, that gets you one element that changes to gray when you mouse over it. It doesn’t do anything else yet. So let’s add some more code to the Observer. First, you have to decide if you want the mouseover to ‘stick’ – to only be removed if another element in the same group is moused over. If you don’t, and you want the elements to behave independently and always clean up after themselves, then you would do this (after clicking once on your button element):

  1. Add a second DOM Event called ‘mouseout’, and it its Function Body, enter this.morph('background-color:#fff');.

Test again, and you should see a gentle fade between the gray and white colors when you mouse in and out.

If you wanted the “sticky” behavior instead, you would need two or more elements to work with. First, you want to add the code, so you only have to do this once.

  1. Click on the element, and on its Function Body button on the mouseover DOM Event, and edit it to read this.morph('background-color: #ccc').siblings().invoke('morph','background-color:#fff');
  2. Make sure your element is still selected, then Cut it to the clipboard.
  3. Draw an HTML box where you want your group of elements to appear, and double-click inside it to get a text cursor. Paste a number of times.

You should see a fading transition when you mouse over these elements.

You can position them however you like within the outer HTML box, using Float and Margin to adjust position and spacing.

If you’re using Freeway 5.6.2 or better, you can change the DOM Event name to ‘mouseenter’ instead of ‘mouseover’, and ‘mouseleave’ instead of ‘mouseout’ and you will get more graceful handling of child elements in your fading elements. (Say you wanted to add some text inside your HTML fading element – mouseover would fail in a very confusing way.)

You don’t have to use background color, either, anything that can be specified as CSS is fair game for a morph. If the transition is too slow, then you can pass a duration parameter to it like this: this.morph('background-color: #ccc', {duration:0.4}).siblings().invoke('morph','background-color:#fff', {duration:0.4}); to make the transitions only take 4/10 of a second.

Now using Observer for multiple elements does lead to a lot of code duplication, so if you get the effect you like, you could then refactor the page to only have one instance of the effect code and programmatically apply it to each of your elements using CSS selectors. But baby steps – if you can get an example page up on the Web somewhere and post a link, I can help you wire it up.

Walter

On Apr 20, 2012, at 9:40 AM, SJ-Creative wrote:

Thanks Walter,

But is there any way to make the image go back to it’s original state when I move the mouse off of it, or ‘mouse out’?

Simon

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options