Tag: 导航

寻找一个jQuery效果来逐步揭示隐藏的DIV /图像

可能是我遗漏了一些明显的东西，但我无法弄清楚如何慢慢地显示隐藏的图像/ DIV，以便从上到下显示它。 如果你看看这个jsfiddle，你会看到我试图用jQuery中的’show’来揭示的图像： http://jsfiddle.net/nickharambee/Lj7z9/13/ ‘show’的问题在于它从左上角开始增长图像。 我正在寻找的是从这些图像中可以清楚地看到的效果： 即红色的“家”图像/ DIV从上到下逐渐显露，以便覆盖棕色的“家”图像。 是否有可能用jQuery实现这样的效果，如果是这样，最好的方法是什么？ 我想在导航栏中的所有图像上使用此转换。 谢谢， 缺口 新增代码 HTML： CSS： li { background: url(‘images/sprite.png’) no-repeat; background-position: 0px 0px; height: 40px; } 脚本： $(“li#test2”).hover( function () { $(this).animate({ ‘background-position-y’: ‘-40’ }, 500); }, function () { $(this).animate({ ‘background-position-y’: ‘0’ }, 500); } );

单页网站上的复杂活动状态导航

HTML： what how projects faq contact JS： $(‘nav li a’).click(function(e) { e.preventDefault(); $(‘a’).removeClass(‘active-state-navigation’); $(this).addClass(‘active-state-navigation’); $(‘logo-ribbon a’).click(function(){ $(‘nav li’).removeClass(‘active-state-navigation’); }); }); 我需要实现的目标如下： 一旦你点击一个菜单项，一个经典的活动状态..这个我已经用js的第一行实现了 我希望在页面滚动时也能触发活动状态。 所以，如果我滚动，让我们说，＃contact部分，活动状态更改为“联系人”菜单项 我还需要这个，如果我点击“.logo-ribbon a”，“活动状态导航”将被移除到导航中的任何位置。

单击菜单项后关闭jquery移动菜单

基于此演示： http ： //webdesignerwall.com/demo/mobile-nav/这是我的代码。 jQuery(document).ready(function($){ /* prepend menu icon */ $(‘#nav-wrap’).prepend(‘<img id="logo" src="/wp-content/themes/blue-and-grey/images/mobileimages/hme_btn.png” />’); /* toggle nav */ $(“#menu-icon”).on(“click”, function(){ $(“#nav”).slideToggle(); $(this).toggleClass(“active”); }); }); 我需要的是单击菜单项后“关闭”菜单，因为它是单页网站，我不希望它在点击后保持打开状态。 我怎么做？ 非常感谢！

Flexslider manualControls无法正常工作

我用Flexslider创建了一个滑块，我正在尝试使用manualControls：创建导航菜单，但链接不起作用。 这是flexslider和滑块/导航本身的代码： Flexslider： $(window).load(function() { $(‘.flexslider’).flexslider({ controlsContainer: “.slidercontainer”, controlNav: true, manualControls: “.flex-control-nav li”, }); }); 滑块和导航： slide1 slide2 1 2

Jquery：当hover在菜单项上时，显示文本

我是JQuery的新手，但希望在我正在构建的网站中使用它。 当用户使用li class hovertriggerssubhead将菜单鼠标hover在菜单中时，我想在其下方显示一些文本，位于div（嵌套在li中），ID为NavSubhead 。 我已经看了几个这样的例子，即在JQuery文档的FAQ中的cookbook和JQuery站点本身的代码。 这是我的HTML代码： Home Gallery Under Construction Under Construction Contact 我尝试了两种在我的JQuery代码中完成此操作的方法; 他们在下面： $(document).ready(function() { //first method $(“.NavSubhead”).hide(); $(‘#Navigation li’).hover( function(){$(this).find(‘div.NavSubhead:hidden’).fadeIn(500);}, function(){$(this).find(‘div.NavSubhead:visible’).fadeOut(500);} ); //second method $(“#Navigation li div”).hide(); $(“#Navigation li.hovertriggerssubhead”).hover( function () { $(this).children(“div.NavSubhead”).show(); },function(){ $(this).children(“div.NavSubhead”).hide(); });//hover });// document ready 任何帮助，将不胜感激。 谢谢！ 更新 ：我尝试了很多答案，即使是一个有工作演示的答案，但它仍然不起作用，这很奇怪。 它是否可以通过任何机会与导航html的约束相关，因为包含表格？ 桌子有一个固定的宽度。 除此之外，我不知道是什么问题，并且正确引用了JQuery。 提前致谢！ 更新＃2 ：由于我的HTML有一些奇怪的限制，因此可能无法正常工作，我将在此处发布。 正如您在下面看到的，我也在使用这个幻灯片框架。 MZ […]

滚动时jquery导航颜色和高度更改

我想在滚动条上将导航从透明更改为颜色。 很像这个网站。 http://createone.com/contact-us/我看过关于改变大小的post很棒，我也会使用它，但我想主要从透明到颜色。 任何帮助都会很棒。 我对jquery有一点经验，但是无法弄清楚或根据我的需要修改别人以前的问题。 我看到了这个，但却无法让它为我工作。 jquery在滚动时改变不透明度和高度 一个jsfiddle演示会很棒！ 在此先感谢您的帮助。 我也在使用Bootstrap 4，所以如果那里有任何插件。 我也对此持开放态度。

绘图图表 – 使用flot.navigate插件同时拖动/缩放两个或多个图表

我在同一页面上显示了两个或多个flot图表，并使用flot.navigate插件进行拖动和缩放。 我可以独立于其他图表缩放和拖动单个图表，但我希望其他图表与应用导航操作的图表一起移动或缩放。 有些页面可能只有两个图表，其中一些页面在同一页面上有五个或六个 我的小提琴有两个图表显示，一个可以缩放（鼠标滚动）或只拖动一个图表。 任何想法或帮助都非常感谢。 谢谢。 http://jsfiddle.net/mashinista/cPNNJ/ $(function () { var d1 = []; for (var i = 0; i < Math.PI * 2; i += 0.25) d1.push([i, Math.sin(i)]); var data = [ d1 ]; var d2 = []; for (var i = 0; i < Math.PI * 2; i += 0.25) d2.push([i, Math.cos(i)]); var […]

将键盘绑定到左/右导航

我是一名摄影师，有一个网站，我无法编辑’模板’结构，但可以上传javascript / css等。 我想将next / prev导航绑定到键盘右/左。 链接的结构是： Image Navigation Index Previous Next 我提到了这个，并设法创建了这个。 $(function() {$(document).keyup(function(e) { switch(e.keyCode) { case 37 : window.location = $(‘li.prev’).attr(‘href’); break; case 39 : window.location = $(‘li.next’).attr(‘href’); break; }});}); 这是我被困的地方。 它不起作用，因为它假定我正在引用一个href标记但是引用包含它的li。 任何想法将不胜感激！

单页导航菜单 – 活动指示灯

我正在尝试使用jQuery waypoints更新单页网站的导航。 我想根据视图中的当前部分更新导航。 使用导航链接时，它可以正常工作。 我的问题是当你试图滚动到当前部分上方的一个部分时，活动锚点应该在下面的位置。 请看我的演示 。 jQuery的 $(document).ready(function(){ $(‘section’).waypoint(function(direction) { thisId = $(this).attr(‘id’); $(‘ul li’).each(function(){ var secondaryID = $(this).attr(‘class’); if ( secondaryID == thisId ) { $(‘ul li’).removeClass(‘active’); $(this).addClass(‘active’); } }); },{offset: ‘0’}); }); $(‘a[href*=#]:not([href=#])’).click(function() { if (location.pathname.replace(/^\//,”) == this.pathname.replace(/^\//,”) || location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target […]

Flexslider箭头未​​正确显示

我已经坚持这个问题一段时间了，似乎无法找到答案，所以我决定直截了当地问。 我使用Flexslider插件在网站上显示多个图像，但是，当hover图像时显示的箭头导航关闭。 箭头在顶部被切掉，其下面应该被完全隐藏的文字部分显示出来。 以下是问题的屏幕截图： 我试着修补CSS，但我无法弄明白。 有人可以帮帮我吗？