Box slide up and down on hover with AngularJS

Question

I trying to make a div to appear on top of an image on hover with slide up and slide down effect.

Any pointers on where to start from if I want to avoid jQuery? I'd very much like to use only AngularJS in the app..

Here's an example of what I'm trying to accomplish:

If you want to do this when some data variable changes, [see this question](http://stackoverflow.com/questions/16677304/slide-up-down-effect-with-ng-show-and-ng-animate?lq=1). If you want to do this on hover, [CSS animations are your answer](http://stackoverflow.com/questions/16989585/css-3-slide-in-from-left-transition). — Blazemonger, Mar 21 '14 at 16:28
@Blazemonger unfortunately the animation examples won't work, as I have an image and a div must slide over it, and I can't use the image as wrapper... — Eric Mitjans, Mar 21 '14 at 16:40

score 1 · Answer 1 · answered Mar 21 '14 at 16:34

This is an example of how it's done using javaScript

        <div style="height: 1px" onMouseover="up()" onMouseout="down()" >
        <img src="#"/>
        </div>

        <script>
        function up()
        {
        div.style.height ="30px";
        }
        </script>
        <script>
        function down()
        {
        div.style.height ="1px";
        }
        </script>

Box slide up and down on hover with AngularJS

1 Answers1