JQuery Slide Toggle not working on this sticky footer when transition: all used?

Question

I'm a little abashed as to why this Sticky footer won't allow a slide toggle animation?

Is there a particular reason why this won't work properly?

#PopupMessage{
    width:95%;
    height:30px;
        background: #999;
    color: #ececec;
    position:fixed;
    bottom:0px; 
    margin:2%;
    padding:1%;
    border-radius:10px;
              -webkit-box-shadow: 0px 5px 5px rgba(0,0,0,.9);
              -moz-box-shadow: 0px 5px 5px rgba(0,0,0,.9);
                         box-shadow: 0px 5px 5px rgba(0,0,0,.9);
    transition: all 0.8s;
    display:none;
}

#PopupMessage:hover{
    opacity:0;
}

The hover effect works, yet for some reason the 'slideToggle' won't work in this context?

I also have an issue (not sure if it is project specific, since it doesn't happen on the fiddle) is that my footer disappears after a few seconds (as if i've double clicked, or similar).

Any suggestions as to why this is occuring?

@DavideScanu I don't think you quite got that one right there... — jbutler483, Nov 21 '14 at 16:52
@jbulter483 Well, what do you want to do when the mouse goes over the popup message? — Davide Scanu, Nov 21 '14 at 16:53
when i run your project, the button i'm using to test disappears, with no 'sticky footer' ever appearing. — jbutler483, Nov 21 '14 at 16:56
Because I added an hover opacity... If click the button and put the mouse on the bottom of the page the popup message will appear... In fact I gave you two links: 1) http://jsfiddle.net/5p4k1hmz/6/ (without hover effect) 2) http://jsfiddle.net/5p4k1hmz/8/ (with hover effect) — Davide Scanu, Nov 21 '14 at 17:00
I think you missed the point unfortunately. (please refer to comments below thecodeparapox's answer) — jbutler483, Nov 21 '14 at 17:02

score 2 · Accepted Answer · edited May 23 '17 at 12:05

2

Change transition to :

transition: opacity 0.8s;

Because, .slideToggle() worked on display property and you hover css is working with opacity. So , for :hover just apply transition on opacity. It will not put effect on slideToggle().

Based on comment, where OP wants to use all for transition but not for display:

transition: all 0.8s, display: 0s;

edited May 23 '17 at 12:05

Community

1
1

answered Nov 21 '14 at 16:30

thecodeparadox

86,271
21
138
164

If, say, there was more than just a mere opacity change, could you do all 0.8s display / something similar? – jbutler483 Nov 21 '14 at 16:33
@jbutler483 you have describe properties you want to apply transition. http://stackoverflow.com/questions/9670075/css-transition-shorthand-with-multiple-properties – thecodeparadox Nov 21 '14 at 16:34
I feared that. I was using all simply for that fact it was saving me a lot of time writing out the same definition for color/etc – jbutler483 Nov 21 '14 at 16:37
@that last update doesn't seem to work unfortunately - the msgbox just 'disappears' completely on hover – jbutler483 Nov 21 '14 at 16:42

score 1 · Answer 2 · answered Nov 21 '14 at 16:29

1

http://jsfiddle.net/5p4k1hmz/3/

Your transition: all 0.8s; is getting in the way.

Try using transition: opacity 0.8s; instead.

answered Nov 21 '14 at 16:29

superUntitled

22,351
30
83
110

I suppose there's no way around having both a transitional hover effect AND jquery slidetoggle? – jbutler483 Nov 21 '14 at 16:30
See my update. Using 'all' is messing with jQuery's height animation. – superUntitled Nov 21 '14 at 16:33
If, say, there was more than just a mere opacity change, could you do all 0.8s display / something similar? i.e. set all transitions to .8seconds, all but not this display property – jbutler483 Nov 21 '14 at 16:34

score 0 · Answer 3 · answered Nov 21 '14 at 16:30

You need to removed transition and it works, see Demo

You can also define the time taken in the slide toggle, see the documentation for more info Slide Toggle doc

     $('#openPopup').click(function () {
         $('#PopupMessage').slideToggle("slow", function () {
             // Animation complete.
         });
     });

#PopupMessage {
    width:95%;
    height:30px;
    background: #999;
    color: #ececec;
    position:fixed;
    bottom:0px;
    margin:2%;
    padding:1%;
    border-radius:10px;
    -webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, .9);
    -moz-box-shadow: 0px 5px 5px rgba(0, 0, 0, .9);
    box-shadow: 0px 5px 5px rgba(0, 0, 0, .9);
    display:none;
}
#PopupMessage:hover {
    opacity:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button id="openPopup">Press me to show popup</button>
<div id="PopupMessage">this will be popup message</div>

Davide Scanu · Answer 4 · 2014-11-21T16:47:48.990

Before to start:

toggle functions are deprecated in jQuery 2.1.0.

Anyway, the problem is that you have put in your CSS code:

transition: all 0.8s;

that makes a conflict with javascript animations. As you can see without this code, your script works perfectly:

http://jsfiddle.net/5p4k1hmz/5/

If you want more control of events you can use jQuery 1.7.2 and use the toggle function with slideUp() and slideDown() functions:

http://jsfiddle.net/5p4k1hmz/6/

If you want an hover effect with opacity: 0 here there is a sample:

http://jsfiddle.net/5p4k1hmz/8/

JQuery Slide Toggle not working on this sticky footer when transition: all used?

4 Answers4