组合滑动和淡入淡出功能 | CSS-Tricks

Dor

# 2010 年 3 月 18 日

好像你读懂了我的想法。谢谢 Chris :D

Tofudisan

# 2010 年 3 月 18 日

这太棒了！我可以想象将这种效果应用到很多东西上。

谢谢！

Nightmaster

# 2010 年 5 月 30 日

有演示吗？如果有，我想看看。

Steviss

# 2010 年 6 月 12 日

谢谢，老兄！你的网站很棒！找到了很多有用的技巧！

El garch Hicham

# 2011 年 2 月 28 日

您好，有演示下载吗？它对我无效。
谢谢您的精彩文章。

Amir Monfared

# 2012 年 2 月 15 日

不错，但我认为如果有一个类似“下载”的演示页面会更好。

Rob Salaman

# 2012 年 5 月 14 日

这篇文章很棒，Chris，谢谢。

miyijura

# 2012 年 6 月 29 日

效果很棒，而且很容易修改！
谢谢！

zing

# 2012 年 8 月 15 日

看到演示或示例总是好的。

JeyKeu

# 2012 年 12 月 27 日

谢谢 @Chris。

@Amir Monfared：来了，http://jsfiddle.net/jeykeu/ejcn8/

jake

# 2013 年 4 月 18 日

再次感谢 Chris。我一次又一次地通过你的网站找到了我想要的东西。

Kalrav Bhatnagar

# 2013 年 10 月 9 日

非常感谢 Chris！干得好

Frederik

# 2014 年 6 月 11 日

不错，以防万一其他人想使用它

你可能想添加 padding: 'toggle' 以防止在你想要切换的元素上使用填充时出现跳跃动画。

Nithin

# 2014 年 7 月 4 日

查看此处的演示

http://codepen.io/np24/pen/biqtE

谢谢，
Nithin

Andy Fleming

# 2014 年 8 月 17 日

以下是用于明确“滑动淡入淡出”或“滑动淡出”的相应函数。

$.fn.slideFadeToggle  = function(speed, easing, callback) {
    return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);
};

$.fn.slideFadeIn  = function(speed, easing, callback) {
    return this.animate({opacity: 'show', height: 'show'}, speed, easing, callback);
};

$.fn.slideFadeOut  = function(speed, easing, callback) {
    return this.animate({opacity: 'hide', height: 'hide'}, speed, easing, callback);
};

Corry Frydlewicz

# 2015 年 1 月 20 日

嗨，伙计们，
如果我想让它在 display: none 和 display: flex 之间切换，并保持所有兼容性，这样可以吗？或者我应该在其中创建一个新的元素以显示：flex？

Paul Revival

评论永久链接# 2015 年 8 月 25 日

最好将你的“flex”元素包装到另一个具有 display:block 的元素中，并在此元素上使用此函数。

Vinny

# 2015 年 11 月 23 日

这在 CSS 中实现更好；

CSS

.slide {
position: relative;
left: 50%;
height: 20px;
animation: 5s slide;
}

@keyframes slide {
from: { left: 100%; opacity: 0; }
to: { left: 50%; opacity: 1; }
}

gokul

# 2016 年 9 月 13 日

子菜单………….

$(document).ready(function () {
                $('.parent').on("click", function () {
                    $(this).find('li:first a').addClass('');
                    $(this).find('li:first').addClass('');
                    $('li a').removeClass('sel1');
                    $('li').removeClass('seler');
                    $(this).find(".sub-nav1").fadeToggle("slow");
                    $(this).siblings().find(".sub-nav1").hide();

               if ($(".sub-nav1:visible").length === 0) {
                    $("#menu-overlay").hide();
                    $(this).find('li:first a').removeClass('sel1');
                    $(this).find('li:first').removeClass('seler');
                } else {
                    $("#menu-overlay").show();
                    $('ul.sub-nav1 li a').addClass('mar');
                    $('ul.sub-nav1 li a').addClass('selcol');
                    $(this).find('li:first a').addClass('sel1');
                    $(this).find('li:first').addClass('seler');
                    // $(this).find('ul').slideToggle();
                }
            });

pratik

# 2019 年 2 月 12 日

如何将其转换为使用 slideUp？

用法

评论

发表回复 取消回复

发表回复取消回复