带有jQuery动画的Navbar

时间:2016-10-06 20:51:27

标签: javascript jquery

我正在尝试模仿具有滑动/淡化效果和滑动/淡出效果的导航栏。但是,我对jQuery动画感到困惑......:/任何帮助都非常感谢。我想要的导航栏在jsfiddle的评论中被引用,因为我不知道我是否可以把它放在这里¯_(ツ)_ /¯

**更新:GOT IT - 在freenode上的#jQuery //必须再次编辑,因为当我的鼠标在div上时,测试测试**消失了**

https://jsfiddle.net/106p6xvh/4/

$(function () {
  if (parseInt($(document).width) <= 990) {
    console.log('triggered');
    $('.js-navbar-collapse').removeClass('navbar-nav');
    $('.js-navbar-collapse').addClass('navbar-stacked');
  }

  $('.navbar-nav>li>a').mouseover(function() {
    $('#' + $(this).attr('id') + '-stack').
    css('opacity', 0)
      .slideDown('slow')
      .animate(
      { opacity: 1 },
      { queue: false, duration: 'slow' }
    );
  });

  $('.nav-items').hover(function() {
    clearTimeout($(this).attr('id'));
  });

  $('.navbar-nav>li>a, .nav-items').mouseleave(function() {
    var stack_id = $(this).attr('id');
    if (stack_id.indexOf('-stack') == -1) {
      stack_id += "-stack";
    }

    setTimeout(function() {
      if ($('#' + stack_id).is(":hover") == false) {
        $('#' + stack_id).slideUp(500).animate({
          opacity: 0
        }, {
          queue: true,
          duration: 'slow'
        });
      }
    }, 500);
  });
});

1 个答案:

答案 0 :(得分:0)

查看我上面的编辑

public static bool Equals(Object objA, Object objB) 
{
    if (objA==objB) {
        return true;
    }
    if (objA==null || objB==null) {
        return false;
    }
    return objA.Equals(objB);
}