使用滑動切換或動畫從右到左滑動

-1

過去，當我要求菜單從上到下滑動時，我設法讓我的代碼在slideToggle中工作。但現在我需要將菜單從右側滑動到左側。所以我決定採用.animate的方法。使用滑動切換或動畫從右到左滑動

我已經試過這一點，但它不能完全工作：

$(MENU_BUTTON).click(function() { 
     $(MENU_ID).animate({ width:'245' }, 600); 
    });

它從右到左移動，但只有一次，然後被卡住。另外，我希望它也可以滑入。我怎樣才能做到這一點？

來源

2013-08-01 Smithy

小提琴請..... –

如果您不希望它只工作一次，您必須在開始動畫之前每次都將寬度設置爲0。 – slash197

所以第一次，你從左到右爲它設置動畫，下一次，你從右向右進行動畫處理？如果我理解你的話，你希望菜單被隱藏起來，然後當按下按鈕時，菜單從左向右滑動。下次按下按鈕時，它會從右向左滑動。這正是代碼所做的，除了隱藏菜單。

$(MENU_BUTTON).click(function() { 
    var right = $(MENU_ID).hasClass('right'); 
    $(MENU_ID).toggleClass('right'); 
    // If you would like to hide/show it too. 
    // Change the 0 to 0-$(MENU_ID).outerWidth(); 
    /* if (right) { 
     setTimeout(function() {$(MENU_ID).hide();}, 600); 
    } else $(MENU_ID).show(); */ 
    $(MENU_ID).animate({ width:(right?0:245) }, 600); 
});

來源

2013-08-01 15:18:43

對不起，這種作品。我可能會困惑你。它需要永遠是正確的左邊。因此，它開始隱藏，點擊按鈕時，從右側滑動到左側，再次點擊按鈕時，再次返回 – Smithy

也許我的英語不完美，但我仍然認爲它聽起來像你想要的菜單是隱藏，然後當按下按鈕時，菜單從左向右滑動。下次按下按鈕時，它會從右向左滑動。這正是代碼所做的，除了隱藏菜單。當我說「從左到右到...」時，你可能誤解了我？ –

試試這個fiddle

HTML

<div class="menu"> 
    <ul class="upper"> 
     <li><a href="" title="">Dynamic item 1</a> 

      <ul class="inner"> 
       <li> <a href="">Subitem 1 of 1</a> 

       </li> 
       <li> <a href="">Subitem 2 of 1</a> 

       </li> 
      </ul> 
     </li> 
     <li> <a href="">Static item</a> 

     </li> 
     <li><a href="">Dynamic item 2</a> 

      <ul class="inner"> 
       <li><a href="">Subitem 1 of 2</a> 

       </li> 
      </ul> 
     </li> 
    </ul> 
</div>

CSS

.menu { 
    width: 150px; 
    float: right; 
    position: relative; 
} 
.menu ul li { 
    margin-bottom: 1px; 
} 
.menu ul.upper li a { 
    width: 150px; 
    background-color: #000; 
    color: #FFF; 
    text-decoration: none; 
    display: block; 
    padding: 7px 10px; 
    text-align: left; 
    font-weight: bold; 
} 
.menu ul.inner { 
    position: absolute; 
    right: 160px; 
    z-index: 1000; 
    display: none; 
    width: 150px; 
    right: 170px; 
} 
.menu ul.inner li a { 
    width: 150px; 
    background-color: #3D6AA2; 
    color: #FFF; 
    text-decoration: none; 
    display: block; 
    padding: 7px 10px; 
    text-align: left; 
    font-weight: bold; 
}

$('.upper li').each(function() { 
    $(this).find('ul.inner').css({top: $(this).offset().top}) 
}); 

$('.upper li').hover(function() { 
    $(this).find('ul.inner').stop(true, true).animate({ 
     width: "toggle" 
    }, { 
     queue: false, 
     duration: 250 
    }); 
});

來源

2013-08-01 18:39:04

使用滑動切換或動畫從右到左滑動

回答

相關問題