Question

我正在尝试制作一个打开链接的菜单（带按钮）。当您将鼠标悬停在按钮上时，slideDown会显示有关该链接的更多信息。

我已经将所有这些功能都用于技术工作，但是我不能让动画速度比速度慢。

我是javascript和Jquery的新手，我花了2-3天的时间让javascript和CSS做我到目前为止所做的...是的，它可能很臃肿......但我还是我到目前为止完成了这件事：D

PS，我知道大多数菜单是用w / ul制作的，但我真的很喜欢按钮看起来和厌恶尝试将列表放在一起的方式。上次我尝试使用单独的ul来获取信息，并且它像第一个一样继续设置第二个列表，因为它在里面...太烦人了。我也尝试过使用CSS的垂直链接列表，但仍然认为扁平的“按钮”非常无聊。我非常喜欢实际html的3D esk

HTML：

 <div class="mainmenu">
    <div id="homemenu">
      <button id="home" class="mmbutton active">Home</button>
      <div id="homesub" class="sub active">-just a bit about this page</div>
    </div>

    <div id="photosmenu">
      <button id="photos" class="mmbutton">Photos</button>
      <div id="photossub" class="sub inactive">-just a bit about this page
      </div>
    </div>
  </div>

的javascript / jquery的：

$(function(){
 var mmbutton = $('.mmbutton');
 var start    = "http://";
 var address  = "[my web address"; //add "http:
 var about    = "[web address]/aboutme.html";
 var id       = 0;
 var rel      = 0;
 var mmsub    = 0;
 //<click link buttons:
    $(mmbutton).click(function(){
      var id = $(this).attr('id');
        if (id === "home") {
            location.replace(start+address); 
        }else if (id === "about") {
            window.alert("I'm sorry I don't have this page set up yet. Thank you for visiting my page!");
        //add additional buttons here under 'else if'  unless its a subdomain
        }else { 
            location.replace(start+id+'.'+address);//goes to any subdomain by id
        }}); 
    //>detect hover
     $(mmbutton).hover(function(){
          id    = $(this).attr('id');
          rel   = '#'+id+'sub';
          mmsub = '#'+id+'menu';
          console.log('mouseenter'+rel);
          $(rel).removeClass('inactive');
          $(rel).stop().slideDown(500000);
     }, function(){
          console.log('mouseleave'+rel);
          $(rel).addClass('inactive');
          if ( $(this).hasClass('active')) {
            $(rel).removeClass('inactive');
            console.log('this is active');
          }if ($(rel).hasClass('inactive')){
            $(rel).stop().slideUp(500000);
}});});

relatedante CSS：

.inactive {
    display: none;
}
.sub {
  transition-duration: 1s;
}

Answer 1

您可以将所有信息div设置为display:none并使用slideToggle()功能。考虑到您希望在重新创建细分时保持打开，一个选项是创建包含按钮和细分的span元素，并将悬停应用于该范围。所以......

<强> HTML ：

<div class="mainmenu">
  <div id="homemenu">
    <span class="subcontainer">
      <button id="home" class="mmbutton active">Home</button>
      <div id="homesub" class="sub">-just a bit about this page</div>
    </span>
  </div>

  <div id="photosmenu">
    <span class="subcontainer">
      <button id="photos" class="mmbutton">Photos</button>
      <div id="photossub" class="sub">-just a bit about this page</div>
    </span>
  </div>
</div>

<强> CSS ：

.sub {
    display: none;
    /*transition-duration: 1s; IMPORTANT: REMOVE THIS!!*/
}

<强> JQUERY ：

$('span.subcontainer').hover(function() {
    $(this).find('div.sub').slideToggle('slow');
});

重要：检查要使其正常工作，您必须删除您为.sub div创建的过渡样式（它使用jquery函数进行干扰）

注意：我没有使用div.homemenu或div.photosmenu作为悬停的容器，因为div＆＃39; s通常默认情况下会预先应用某些样式，并且可以使用所需的行为进行干扰（例如，它们通常具有宽度= 100％，因此即使您在按钮之外或同一行中的细分，也会应用悬停）。 span通常使用它作为包装器更无害。

我希望它有所帮助

Answer 2

哦！我知道了。我试图做太多（炫耀...... /使用我正在学习的东西）。我删除了添加和删除课程的行＆＃39; inactive＆＃39;当我想要它时，只需切换SlideUp和slideDown。现在我可以调整动画速度：

（HTML保持不变）
CSS：删除了"transition-duration: 1s;"

JavaScript的：

$(function(){
 var mmbutton = $('.mmbutton');//any/all buttons
 var activebut= 0; //detect button classes
 var mmdiv    = $("div[id$='menu']");//detect button sub info

 var start    = "http://";
 var address  = "[address]/index.html"; //add "http://" + [blog or games] + address
 var about    = "http://[address]/aboutme.html";
 var id       = 0;
 var sub      = 0;
 var slidespeed= 450; //slideUP/slideDown animation speed //added var for speed

 //<click link buttons: (unchanged)
    $(mmbutton).click(function(){
      id = $(this).attr('id');
        if (id === "home") {
            location.replace(start+address); 
        }else if (id === "about") {
            location.replace(start+'[address]/aboutme/index.html')
        //add additional buttons here under 'else if'  unless its a subdomain
        }else { 
            location.replace(start+id+'.'+address);//goes to any subdomain by id
        }
    }); 
 //<hover display:
    //<detect mouse ON button
     $(mmbutton).hover(function(){
        id    = $(this).attr('id');
        sub   = '#'+id+'sub';
        activebut= $(this);                         

        if ( $(activebut).hasClass('active')) {
        }else {
            $(sub).stop().slideDown(slidespeed);
        }   
      }); 

    //<detect mouse off button AND div
    $(mmdiv).mouseleave(function(){
        if ( $(activebut).hasClass('active')) {
        }else {
            $(sub).stop().slideUp(slidespeed);
        }
     });
});

我无法让动画速度发挥作用

2 个答案: