我拥有的：

Question

我拥有的：

在点击<ul>时动画并同时淡入的基本<a>。

$("a.language_selected").on('click', function (e) {
    e.preventDefault();
    //$("ul.language_dropdown").fadeToggle("slow");
    $('ul.language_dropdown').fadeIn({queue: false, duration: 'fast'});
    $('ul.language_dropdown').animate({ top: "58px"}, 'fast');
});

我需要什么：

我现在需要在第二次点击相同<ul>时反转（或切换）<a>的淡入和动画。此外，<a>中包含的第二个<ul>用作与第一个<a>完全相同的目的，将被用作取消/关闭按钮。

我的问题：

我浏览了各种类似的StackOverflow问题，但许多问题已有数年之久。反转（或切换）淡入和动画的最现代，最简洁的方法是什么？

Answer 1

您可以在动画中使用jQuery的"toggle"关键字

＆＃13;

$("a.language_selected").on('click', function (e) {
    e.preventDefault();
    $('ul.language_dropdown').animate({ top: "toggle", opacity: "toggle"}, 'fast');
});

＆＃13;

.language_dropdown {
    top : 58px;
    opacity : 1;
    position: relative;
    display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="language_selected">Click to toggle !</a>
<br />
<ul class="language_dropdown">
    <li>test</li>
    <li>test</li>
    <li>test</li>
</ul>

＆＃13;

Answer 2

现代的方法是使用CSS。 我强烈建议使用CSS过渡。但是如果你想使用jQuery的动画：

$('ul.language_dropdown').fadeOut(...);

如果您需要一种方法来识别它是否可见，只需添加一个类：

$('ul.language_dropdown')
    .fadeIn({queue: false, duration: 'fast'})
    .animate({ top: "58px"}, 'fast')
    .addClass('language_dropdown_visible');

然后在您的事件处理程序中，检查该类是否存在，并根据需要进行动画处理。

BTW：淡入通常只是不透明度，所以你可以把两个动画属性放在一起：

$( 'ul.language_dropdown' ).animate({
    top: 58,
    opacity: 1
}, 400);

使用CSS过渡

这些比jQuery动画更快更干净，并且保持你的造型和逻辑分离：

对于CSS（如果已经为这些元素设置了样式，则添加样式）：

ul.language_dropdown {
    opacity: 0;
    top: 0;
    transition: all 400ms; /* Or opacity 400ms, top 400ms if you have other changing properties */
}
ul.language_dropdown.language_dropdown_visible {
    opacity: 0;
    top: 58px;
}

在你的JS中：

$("a.language_selected").on('click', function (e) {
    e.preventDefault();
    $('ul.language_dropdown').toggleClass('language_dropdown_visible');
});

就是这样！超级干净，简洁有序，无需担心半状态和毛刺动画，以及允许浏览器优化的现代高性能代码。

反转（或切换）动画和淡入淡出

我拥有的：

我需要什么：

我的问题：

2 个答案:

使用CSS过渡