Trying to recreate a effect with jQuery and not CSS3

Question

Saw this slide down reveal effect on CodePen, I was wondering if anyone could help me recreate it using jQuery? The effect can be found here. While I understand what's going on with CSS, I would like to create this effect using jQuery/JavaScript.

HTML:

    <section>
    <div id="icon-wrapper">
        <a href="map.html">
            <div class="icons">
                <div class="icon-slide-container">
                    <img class="slide-icon"  alt="The Kite Map Logo" height="100" src="http://thekitemap.com/images/slide/view-map.jpg">
                </div>
            </div>
        </a>
    </div>
</section>

CSS:

    body{
  background:#eeeeee;
}

section{
    float: left;
    padding-top: 50px;
    padding-bottom: 100px;
    width: 100%;
    padding-left:0;
    padding-right:0;
}

#icon-wrapper{
    width:100%;
    float:left;
    height:300px;
}

.icons {
    width:25%;
    float:left;
    position:relative;
}

.icon-slide-container{
    height:300px;
    overflow:hidden;
    text-align: left;
    position: absolute;
    float: left;
    width: 300px;
    left: 50%;
    margin-left: -150px;
}

.slide-icon{
    width:300px;
    height:auto;
    position:absolute;
    margin-top:-300px;
    -webkit-transition:.4s ease;
    -moz-transition:.4s ease;
    -ms-transition:.4s ease;
    -o-transition:.4s ease;
    transition:.4 ease;
}

.slide-icon:hover{
    position:absolute;
    margin-top:0;
}

Out of curiosity, if you understand how it works in CSS and it does indeed work as you want it to, why do you want to implement it in jQuery? — RevanProdigalKnight
– RevanProdigalKnight, Commented Jul 15, 2014 at 17:20
I guess, 1) I want become better at JS 2) I need to work the same on older browsers. But really, I want to get better writing JS. — alyus
– alyus, Commented Jul 15, 2014 at 17:26
since you haven't provided any code attempts... would appear you want somone to create it for you. Where's the learning in that? — charlietfl
– charlietfl, Commented Jul 15, 2014 at 17:28
The slide methods in jQuery are where you should start, but CSS is a far simpler solution. And if you want to get better at JS, asking folks to "help me recreate it using jQuery" won't help you get better. Give it a shot yourself first and then come here with specific questions. — WillardSolutions
– WillardSolutions, Commented Jul 15, 2014 at 17:28
No, I tried... I may not copied any of the code I did, but then again... a lot of the code I wrote... Hell, just looked like chicken scratch. Won't learn copying other code, but when you don't know where to start or have any clue... makes it more difficult. Thanks @ChrisWillard pointing in me in a direction. — alyus
– alyus, Commented Jul 15, 2014 at 18:09

isherwood · Accepted Answer · 2014-07-15 18:10:55Z

1

I agree that you should've posted your attempt. Here's a simple start:

http://jsfiddle.net/isherwood/9Lwk8/

.wrapper {
    width: 200px;
}
.wrapper > div {
    height: 200px;
}
.text {
    display: none;
    background-color: #eee;
    overflow: hidden;
}

<div class="wrapper">
    <div class="text">
         <h1>Some text</h1>
    </div>

    <div class="image">
        <img src="http://placekitten.com/200/200" />
    </div>
</div>

$('.wrapper').hover(function () {
    $('.image').slideUp();
    $('.text').slideDown();
}, function () {
    $('.image').slideDown();
    $('.text').slideUp();
});

To get the text div to slide in from above you'd need to animate margin-top or somesuch. jQuery has excellent documentation, so give it a look.

answered Jul 15, 2014 at 18:10

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

alyus Over a year ago

Thank you @isherwood. One last thing, would using mouseenter and mouseleave be correct when starting and resetting the animation margin-top?

isherwood Over a year ago

"The .hover() method binds handlers for both mouseenter and mouseleave events. You can use it to simply apply behavior to an element during the time the mouse is within the element." api.jquery.com/hover

Collectives™ on Stack Overflow

Trying to recreate a effect with jQuery and not CSS3

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related