Edge animate - How to hover and active effect in CSS ?

Hi there,

  The easiest way to achieve this would be to specify the properties with code since there is no animated transition that you're looking for.

  Start by opening Edge Animate and making two text fields with "home" and "about us". Then, name the text fields with a <div> ID by changing the name in the Properties panel. Click in the top text area and change the name <div> ID to something that's easy to identify with. I chose "homeText":

Repeat this step for the "about" text field. Next, click the Open Actions icon next to your home text field object in the Timeline area:

Choose "click" in the pop up menu that appears:

Copy and paste this code below (this is CSS code styling the color property). Make sure to change "homeText" to whatever you chose to call the home text field object:

sym.$("homeText").css("color", "#650097");

sym.$("aboutText").css("color", "#000");

In this example I made the home link's active color #650097 (purple). This code tells Edge Animate to make the home link purple and to make sure that the about link is the default black (#000).

Next, click the plus button in the Open Actions window. This time choose "mouseover". This is where we will add the code for the hover functionality.

Copy and paste the following code into the code window:

sym.$("homeText").css("text-decoration", "underline");

Finally, hit the plus button again to add one more event to the buton. This time choose "mouseout". This code will add funtionality to the button to make the underline disappear after the user is not hovering over it anymore. Copy and past the following code into the code window:

sym.$("homeText").css("text-decoration", "none");

Repeat these steps for the aboutText button. The code for the about button is below.

Click:

sym.$("aboutText").css("color", "#650097");

sym.$("homeText").css("color", "#000");

Mouseover:

sym.$("aboutText").css("text-decoration", "underline");

Mouseout:

sym.$("aboutText").css("text-decoration", "none");

If you need additional clarification / instruction, let me know. I hope this helps!

I also made a sample project for you to have a look at. I hope this helps!

https://creative.adobe.com/share/a84e1f06-43ac-457f-848e-333e729f3e15

This is very helpful thank you.

What if you wanted to sort of "toggle" the text color when clicking, that is, when you click it, it turns a certain color, then clicking it again sort of de-colors it. And, when clicked, the mouseout function should be disabled. Do you know how to do this?

Thanks so much.

Nemo

Hi dhosford

I have same question but little bit different. How if we have hover with animation,

Example, I have square icon when I mouse in icon it is fly from left to right (looping)

when mouse out, icon back to normal with reverse efect (back with fly from right to left, and steady on origin position).

Thanks in advance

Agnan

To toggle the color you can add a flag like this:

var newC= true;

function changeColor(){

     if (newC){

     sym.$("aboutText").css("color", "#650097");  // color 1

     newC= false;

     } else

     sym.$("aboutText").css("color", "#000000");  // color 2

     newC= true;

     }

}

// click event will use the function to toogle the color

sym.$('yourButton').click(function(){

     changeColor();

});

Hi resdesign.

I found a million examples on how to change a css property, but I can't figure out how to return the current value.

In my case I need to use the current left value of a button in a calculation.

How do I access the left value?

Hi Miss Kai,

Look at the jQuery position() (or may be offset()) method : http://api.jquery.com/position/

Gil

Yea! Thanks AMULI! Works perfectly. Also thanks for the jquery link. Wow, didn't realize we could use all these jquery fucntions, etc.

Very nice of you to take the time to generate the example!