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);
        });
      }
  );
});

基本上，一旦幻灯片显示了父，我就会通过回调淡出（）下拉内容 >已经完成，反之亦然。

Answer 2

我会推荐给您的是JQuery专门针对slideUp()和fadeIn()函数的文档。

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

正如在thykka的solutoin中一样，另一个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，而不是使用类

jQuery滑落然后淡出内容

3 个答案: