jQuery 向下滑动然后淡入内容

Question

我想知道是否有人可以提供帮助，我正在尝试复制客户喜欢的菜单（原则上）：http://www.arup.com

到目前为止，我已经尝试查看该网站背后的代码/jquery，它似乎过于复杂（至少对我而言），我在 JSFiddle 上已经做到了这一点

$(document).ready(function () {
    $('#qc1,#qc2,#qc3').hover(function () {
        $(this).find('.answer').stop(true, true).fadeIn({
            duration: '3000',
            queue: true
        }).css('display', 'none').slideDown({
            duration: '1000',
            queue: false
        });
    }, function () {
        $(this).find('.answer').stop(true, true).fadeOut({
            duration: '3000',
            queue: true
        }).slideUp({
            duration: '2000',
            queue: false
        });
    });
});

理想情况下，我希望 div 向下滑动，然后让内容淡入 onmousein（然后反向 onmouseout），但作为 jQuery 新手已经尝试了几个小时。

Answer 1

可能是like this 的东西？

$(document).ready(function() {
  $(".answer").each(function() {
      $(this).hide();
  });
  $('#qc1,#qc2,#qc3').hover(
    function() {
      $(this).find('.answer')
        .stop(1,1)
        .slideDown(500, function() {
          // note: i've wrapped the dropdown's content with an additional div.
          $(this).find("div").fadeIn(500); 
        });
    }, function() {
      $(this).find('.answer div')
        .stop(1,1)
        .fadeOut(500, function() {
          $(this).parent('.answer').stop().slideUp(500);
        });
      }
  );
});

基本上，一旦它的 parent 的 slideDown() 完成，我正在通过回调淡入（）下拉列表的 content，反之亦然。

Answer 2

我建议您参考 JQuery 文档，专门用于 slideUp() 和 fadeIn() 函数。

可以选择在动画完成后执行“完成”功能。这就是您要在幻灯片之后执行淡入淡出的内容，反之亦然。

与 thykka 的解决方案一样，需要另一个 div 才能使淡入淡出和滑动分别发生。

<div class="answer" id="a1">
    <div class="answer_content">
        What makes us different
        <br />Vision & Values
        <br />Our Story
        <br />Our People
    </div>
</div>

这是DEMO

$(document).ready(function () {
    var qcContainer = $('#qc1,#qc2,#qc3');

    qcContainer.hover(
    // On mouse enter function
    function () {
        qcContainer.find('.answer').stop(true, true).slideDown(
            "slow", function () {
            // slideDown is complete, now for fadeIn
            qcContainer.find('.answer_content').stop(true, true).fadeIn('slow', function () {
                // Animation complete.
            });
        });

    },
    // On mouse leave function
    function () {
        qcContainer.find('.answer_content').stop(true, true).fadeOut(
            "slow", function () {
            // fadeOut complete, time for slideUp
            qcContainer.find('.answer').stop(true, true).slideUp("slow", function () {
                // Animation complete.
            });
        });
    });
});

Answer 3

类似http://jsfiddle.net/P2ySU/3/ 这是我在示例网站上看到的。它所做的只是扩展容器并在菜单运行时保持这种状态

$('#container').on({
    mouseenter: function() {
        $(this).animate({height: '200px'});
    },
    mouseleave: function() {
        $(this).animate({height: '53px'});
    }
});

我加了

<div id="container">

作为整体包装。此外，您应该更改项目上的重复 ID 并改用类