javascript - 单击按钮即可触发 2 个操作

Question

我正在尝试将两个操作分配给 jQuery 中的按钮。该按钮应该:

1. 打开一个隐藏的 div，然后...
2. 向下滚动以查看所述 div。

虽然这两个操作都在按钮上进行，但目前需要单击两次。第一次单击时，会出现 div，但要将其滚动到 View 中，我需要再次单击该按钮。

有什么建议我会出错吗？

jQuery

$(document).ready(function () {
"use strict";
$('.footer a').click(function (event) {
    event.preventDefault();
    $('.impr-text').hide(); // hide previous popup div
    var id = $(this).data("id"); // get the div id which to show
    $('#' + id).fadeIn(function () {  // show cuurent click link's popup
        $(this).css({
            'display': 'block'
        });
    });
    $.scrollTo( '#impressum-footer', 800, {easing:'elasout'} );
});
});

HTML

<div id="impressum-footer">

        <div class="footer">
            <div class="inner-wrap-imp">
                <ul class="impressum-links">
                    <li><a href="#impressum-footer" class="impr-link" data-id="impr-text">Impressum</a></li>
                    <li>|</li>
                    <li><a href="#impressum-footer" class="impr-link" data-id="impr-text">Datenschutz</a></li>
                    <li class="impressum-button" ><a href="#impressum-footer" class="impr-link" data-id="impr-text"></a></li>
                </ul>
            </div>  
        </div>

        <div id="impr-text" class="impr-text">
            <div class="inner-wrap"> ...

Answer 1

您需要将 scrollTo 放入 fadeIn 完成回调处理程序中。这样，callTo 就会在 fadeIn 完成时执行，而不是本质上同时执行。目前，您似乎还在另一个参数所在的位置放置了一个回调函数(持续时间或选项对象，具体取决于您使用的方法签名)。不知道为什么你要在那里改变CSS。

尝试这样的事情:

$(document).ready(function () {
    "use strict";
    $('.footer a').click(function (event) {
        event.preventDefault();
        $('.impr-text').hide(); // hide previous popup div
        var id = $(this).data("id"); // get the div id which to show
        $('#' + id).fadeIn({
            duration: 100, // or whatever duration you want to use
            complete: function() {
                $.scrollTo( '#impressum-footer', 800, {easing:'elasout'} );
            }
        });
    });
});