过渡时，JQuery Slide Toggle 在此粘滞页脚上不起作用：全部使用？

Posted 2023-03-06

【中文标题】过渡时，JQuery Slide Toggle 在此粘滞页脚上不起作用：全部使用？

【英文标题】：JQuery Slide Toggle not working on this sticky footer when transition: all used?

【发布时间】：2015-01-19 20:47:57

【问题描述】：

我有点不好意思为什么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;

悬停效果有效，但由于某种原因，“slideToggle”在这种情况下不起作用？

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

关于为什么会发生这种情况的任何建议？

【问题讨论】：

查看我的答案以查看悬停动画

@DavideScanu 我不认为你完全明白那个...

@jbulter483 那么，当鼠标移过弹出消息时，你想做什么？

当我运行你的项目时，我用来测试的按钮消失了，没有出现“粘性页脚”。

因为我添加了悬停不透明度...如果单击按钮并将鼠标放在页面底部，则会出现弹出消息...实际上我给了您两个链接：1）@ 987654322@（无悬停效果）2）jsfiddle.net/5p4k1hmz/8（有悬停效果）

【参考方案1】：

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

你的transition: all 0.8s; 挡路了。

尝试改用transition: opacity 0.8s;。

【讨论】：

我想没有办法同时拥有过渡悬停效果和 jquery slidetoggle？

查看我的更新。使用 'all' 会影响 jQuery 的高度动画。

如果说，不仅仅是不透明度的变化，你能做所有 0.8 秒的 display / 类似的事情吗？即将所有转换设置为 0.8 秒，但不是此显示属性

【参考方案2】：

将过渡改为：

transition: opacity 0.8s;

因为.slideToggle() 处理display 属性，而您hover css 正在处理opacity。所以，对于:hover，只需在opacity 上应用过渡。它不会对slideToggle() 生效。

基于comment，OP 希望使用all 进行转换，但不使用display：

transition: all 0.8s, display: 0s;

【讨论】：

如果说，不仅仅是不透明度的变化，你能做所有 0.8 秒的 display / 类似的事情吗？

@jbutler483 您已经描述了要应用过渡的属性。 ***.com/questions/9670075/…

我担心这一点。我使用 all 只是因为它节省了我很多时间为颜色/等写出相同的定义

@不幸的是，上次更新似乎不起作用 - msgbox 只是在悬停时完全“消失”

【参考方案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>

【参考方案4】：

开始之前：

在 jQuery 2.1.0 中不推荐使用切换函数。

不管怎样，问题是你已经输入了你的 CSS 代码：

transition: all 0.8s;

这与 javascript 动画发生冲突。如您所见，没有此代码，您的脚本可以完美运行：

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

如果您想要更多地控制事件，您可以使用 jQuery 1.7.2 并使用带有 slideUp() 和 slideDown() 函数的切换功能：

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

如果您想要不透明度为 0 的悬停效果，这里有一个示例：

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