Convert jquery animation to CSS3

Question

HTML:

 <div id="slick-slidetoggle">wxyz</div>           

            <div id="slickbox" >abcd</div>

JS

// hides the slickbox as soon as the DOM is ready (a little sooner that page load)

         var hoverVariable=false;
        var hoverVariable2=false;

        $('#slickbox').hide();
        $('#slick-slidetoggle').mouseover(function() {
            hoverVariable2=true;
            $('#slickbox').slideToggle(600);
            return false;
        })
        $('#slick-slidetoggle').mouseleave(function() {
            hoverVariable2=false;
            setTimeout(function (){
            if(!hoverVariable && !hoverVariable2){
            $('#slickbox').slideToggle(600);
            return false;}
         }, 1000);
        })
        $('#slickbox').mouseleave(function() {                    
            hoverVariable=false;
            setTimeout(function (){
            if(!hoverVariable && !hoverVariable2){                    
            $('#slickbox').slideToggle(600);
            return false;}
            return false;
           }, 1000); 
        })
        $('#slickbox').mouseover(function() {
             hoverVariable2=false;

            hoverVariable=true;

        })

CSS

#slickbox {
    background: black;
    width:100px;
    height: 135px;
    display: none; 
    cursor:pointer;
    color:white;
}
#slick-slidetoggle{
 background: yellow;
    width:100px;
    height: 135px;
    cursor:pointer;
    color:black;

}

Now the above functionality is what I want to achieve using purely CSS, which is when I hover over the "wxyz" button "abcd" button should come down and stay visible even is mouse is moved away from "wxyz" for 3 secs.

I tried transition delay with display property but apparently that doesn't work on display property, then I tried position:absolute & visibility & transition delay of visibility, but then the appearance of button got delayed by 3 secs not the hidnig. I want the "abcd" button to hide after 3 secs of moving the button away from "wxyz" using only CSS or CSS3

Can you give us a jsfiddle of what you already tried so that we can try to find a solution from there ? — tchap
– tchap, Commented Dec 31, 2012 at 9:12
@tchap jsfiddle.net/sP5hg/7/ This is what I have tried, I have managed to delay the visibility by 4 secs, but I am supposed to delay the disappearance by 4 secs. OR 3 — user1928136
– user1928136, Commented Dec 31, 2012 at 9:23

Pranav 웃 · Accepted Answer · 2012-12-31 09:20:14Z

3

Here is an Example (Code here)

(I have written only -webkit, but you could add the other prefixes)

#test2 {
    position:absolute;
    z-index:1;
    background: black;
    width:100px;
    height: 135px;
    opacity: 0; 
    cursor:pointer;
    color:white;
    opacity:0;
    -webkit-animation-duration: 600ms;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: both;
}

#test {
    position:absolute;
    z-index:2;
    background: yellow;
    width:100px;
    height: 135px;
    cursor:pointer;
    color:black;

}
.container {
  position:relative;
}

.container:hover #test2 {
  opacity:1;
  -webkit-animation-name: slideDown;
}

.container:not(:hover) > #test2 {
  -webkit-animation-delay:1000ms;
  -webkit-animation-name: slideUp;
  opacity:1;
}

@-webkit-keyframes slideDown {
    0% {
        -webkit-transform: translateY(0);
    } 
    100% {
        -webkit-transform: translateY(135px);
    }
}

@-webkit-keyframes slideUp {
    0% {
        -webkit-transform: translateY(135px);
    } 
    100% {
        -webkit-transform: translateY(0);
    }
}

answered Dec 31, 2012 at 9:20

Pranav 웃

8,4676 gold badges41 silver badges48 bronze badges

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

3 Comments

tchap Over a year ago

Your example doesn't seem to work in Firefox ... you might want to add @-moz-keyframes maybe ?

Rich Bradshaw Over a year ago

He said he's only written -webkit at the top…

user1928136 Over a year ago

@Pranav Kapoor Can you do this same trick to this following jsfiddle jsfiddle.net/sP5hg/7/.. (Marked as an answer and upvoted) Thanks for the help. It was a genius code.

Berker Yüceer · Accepted Answer · 2012-12-31 10:50:41Z

0

Here is a cross browser solution:

Tested on OPERA-SAFARI-CHROME-MAXTHON-FIREFOX

HTML:

<div class="container">
    <div id="test">wxyz</div>           
    <div id="test2" >abcd</div>
</div>

CSS:

#test {
    width:100px;
    height:100px;
    background:yellow;
    position:relative;
    z-index:2;
}
#test2 {
    top:-100px;
    width:100px;
    height:100px;
    background:black;
    color:white;
    position:relative;
    z-index:1;
}
.container:hover #test2 {
    top:0px;
    transition-property:top;
    transition-duration:0.2s;
    transition-timing-function: linear;
    /* Firefox 4 */
    -moz-transition-property:top;
    -moz-transition-duration:0.2s;
    -moz-transition-timing-function:linear;
    /* Safari and Chrome */
    -webkit-transition-property:top;
    -webkit-transition-duration:0.2s;
    -webkit-transition-timing-function:linear;
    /* Opera */
    -o-transition-property:top;
    -o-transition-duration:0.2s;
    -o-transition-timing-function:linear;
    /* IE */
    -ms-transition-property:top;
    -ms-transition-duration:0.2s;
    -ms-transition-timing-function:linear;
}
.container:not(:hover) #test2 {
    top:-100px;
    transition-property:top;
    transition-duration:0.2s;
    transition-timing-function: linear;
    transition-delay: 3s;
    /* Firefox 4 */
    -moz-transition-property:top;
    -moz-transition-duration:0.2s;
    -moz-transition-timing-function:linear;
    -moz-transition-delay:3s;
    /* Safari and Chrome */
    -webkit-transition-property:top;
    -webkit-transition-duration:0.2s;
    -webkit-transition-timing-function:linear;
    -webkit-transition-delay:3s;
    /* Opera */
    -o-transition-property:top;
    -o-transition-duration:0.2s;
    -o-transition-timing-function:linear;
    -o-transition-delay:3s;
    /* IE */
    -ms-transition-property:top;
    -ms-transition-duration:0.2s;
    -ms-transition-timing-function:linear;
    -ms-transition-delay:3s;
}

Fiddle: http://jsfiddle.net/BerkerYuceer/2gVLX/

edited Dec 31, 2012 at 10:50

answered Dec 31, 2012 at 10:03

Berker Yüceer

7,35518 gold badges72 silver badges104 bronze badges

4 Comments

user1928136 Over a year ago

Can you please do the same to this jsfiddle jsfiddle.net/sP5hg/7/ The numbers should disappear after 3 secs. Thanks a lot.. Appreciate the help.. Upvoted..

user1928136 Over a year ago

But arent you just reducing the opacity to 0. I mean even if I hover over the invisible menu, it appears again. But I appreciate the idea. Thanks a lot Sir.

Berker Yüceer Over a year ago

@user1928136 ummm if you want i can change the code to visibility

Berker Yüceer Over a year ago

@user1928136 jsfiddle.net/BerkerYuceer/kGqRM made major changes and prettyfied.. Opera buging this i dont know why but Chrome - Maxthon - Safari - Firefox works just fine..

benbai123 · Accepted Answer · 2013-01-12 06:06:36Z

Use the transition to do it as below:

    <head>
        <style>
            #outer {
                width: 100px;
                height: 50px;
                background-color: green;
                position: relative;
            }
            #innerOne {
                width: 100px;
                height: 50px;
                background-color: blue;
            }
            #innerTwo {
                width: 100px;
                height: 50px;
                background-color: red;
                position: absolute;
                top: -150px;
                left: 100px;

            }

            #outer:hover #innerTwo {
                top: 0px;

                -webkit-transition: top 2s ease-out;
                -moz-transition: top 2s ease-out;
                -o-transition: top 2s ease-out;
                transition: top 2s ease-out;
            }
            #innerTwo:not(hover) {
                -webkit-transition: top 1s ease-in 3s;
                -moz-transition: top 1s ease-in 3s;
                -o-transition: top 1s ease-in 3s;
                transition: top 1s ease-in 3s;
            }
        </style>
    </head>
    <body>
        <div id="outer">
            <div id="innerOne">wxyz</div>
            <div id="innerTwo">abcd</div>
        </div>
    </body>
</html>

Collectives™ on Stack Overflow

Convert jquery animation to CSS3

3 Answers 3

3 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related