Opacity on Hover

[PropKitty]

Hello! I am new to GSAP but though I read the beginning documentation and watched the getting started video, my first attempt at learning GSAP is not going well. I'm not certain how to even begin with it, but going to be giving it a shot!

 

My HTML:

<div class="section">
    <h3>Section 1</h3>
    <p>There's some text and what not in this section.</p>
    <div class="editMenu">
        <ul class="editList">
            <li><a href="#">Edit</a></li>
            <li><a href="#">Remove</a></li>
        </ul>
    </div><!-- /editMenu -->
</div><!-- /section -->

My script:

$(document).ready(function () {
            //hover over Section, make editMenu opacity = 1, scale = 1
            //on mouseOut, make editMenu opacity = 1, scale = .7
            $(".section").hover(function () {
                var editMenu = $(this).find(".editmenu");
                TweenMax.to(editMenu, 0.2, { css: { opacity: 1 } });
            },
                function(){
                    var editMenu = $(this).find(".editmenu");
                    TweenMax.to(editMenu, 0.2, { css: { opacity: 0 } });
                }
            );
        });

The CSS I am somehow assuming is screwing things up:

.editMenu{
        position: absolute;
        top: 10px;
        right: 5px;
        opacity: 0;
        transform: scale(.7);
}

I'm assuming I'm missing something simple!

 

Thank you for any help.

[Diaco]

Hi PropKitty 

 

pls make a Codepen Demo available for your questions : How to Create a CodePen Demo

 

pls try like this pen : 

See the Pen pjKjEd by MAW (@MAW) on CodePen

 

and check this topic too : http://greensock.com/forums/topic/11259-problems-in-hover-animations-in-elements/

[PropKitty]

@Diaco:

 

Thank you so much!! I'll remember to make a Codepen for the future!! This a whole new area of coding for me, so I'm really excited to be trying it out.

 

Your code worked beautifully! Now I can understand how it works a little better thanks to your code.