3 Replies Latest reply on Feb 1, 2015 3:44 PM by resdesign

    How to change opacity with mouseover

    One1ness

      I have a photo slider with Next/Previous arrows and dots at the bottom that represent each photo, how do I make them appear only when the mouse hovers over the photo slider? Im new and don't know coding, it was really hard trying to animate that in my timeline since arrows already have other animations on them

        • 1. Re: How to change opacity with mouseover
          resdesign Adobe Community Professional & MVP

          If you are using jquery then you could use animate() supposing that your div is called Rectangle.

           

          sym.$('Rectangle').bind('mouseover',function(){

            sym.$( "Rectangle" ).animate({ 'opacity': 0.25}, 1000);

          });

          sym.$('Rectangle').bind('mouseout',function(){

            sym.$( "Rectangle" ).animate({ 'opacity': 1.00}, 1000);

          });

          1 person found this helpful
          • 2. Re: How to change opacity with mouseover
            One1ness Level 1

            Ok, will this work multiple objects, and how do I do that if so? I want the arrows and the dots to appear when the mouse hovers over the picture, but still keep their click commands, and for them to disappear on mouse out.   And where in edge animate do I put this; are the first 3 lines of code for mouse over and the other 3 for mouse out? Sorry for all the questions, I just really don't know this stuff, but I will be learning it soon because Im starting to see more and more that animation can only take you so far in edge animate.

            Screen Shot 2015-02-01 at 1.56.52 AM.png

            • 3. Re: How to change opacity with mouseover
              resdesign Adobe Community Professional & MVP

              I believe that you can do that. Put your code in Stage/compositionReady.

               

              if your image is called 'image' and your button is called 'nextButton'.

              When you mouse enter on the image it will show the button and you mouse out it will hide the button. Use the same code for the back button.

               

              sym.$("image").bind('mouseenter',function(){

                   sym.$('nextButton').animate({ 'opacity': 1.0}, 1000);});

              });


              sym.$("image").bind('mouseleave',function(){

                   sym.$('nextButton').animate({ 'opacity': 0.0}, 1000);});

              });

              1 person found this helpful