Question

为什么this Sticky footer不允许幻灯片切换动画，我有点惭愧？

是否有一个特殊原因导致它无法正常工作？

#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;
}

悬停效果有效，但出于某种原因，幻灯片切换＆＃39;在这种背景下不会工作？

我也有一个问题（不确定它是否是项目特定的，因为它不会发生在小提琴上）是我的页脚在几秒钟后消失（好像我已经双击，或者相似）。

有关为何发生此事的任何建议？

Answer 1

将转换更改为：

transition: opacity 0.8s;

因为，.slideToggle()处理了display属性，而您hover css正在使用opacity。因此，对于:hover，只需在opacity上应用转换即可。它不会对slideToggle()生效。

基于comment，其中OP希望使用all进行转换，而不是display：

transition: all 0.8s, display: 0s;

Answer 2

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

您的transition: all 0.8s;正在阻碍。

请尝试使用transition: opacity 0.8s;。

Answer 3

您需要删除过渡并且有效，请参阅Demo

您还可以定义幻灯片切换所需的时间，有关详细信息，请参阅文档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>

Answer 4

开始之前：

在jQuery 2.1.0中不推荐使用

切换函数。

无论如何，问题是你已经输入了CSS代码：

transition: all 0.8s;

与javascript动画冲突。正如您在没有此代码时所看到的那样，您的脚本可以完美运行：

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

如果你想要更多事件控制，你可以使用jQuery 1.7.2并使用带有slideUp（）和slideDown（）函数的toggle函数：

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

如果你想要一个不透明度悬停效果：0这里有一个样本：

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

转换时，JQuery Slide Toggle无法处理此粘性页脚：全部使用？

4 个答案: