一般的なJQueryやアニメーションとの相互作用

基本的に、私はMeteorでアプリを構築していますが、position: fixed;とleft : -300pxに左のナビゲーションバーがあり、それをleft : 300pxにスライドしたいのですが、 Meteorでトランジションをアニメーション化します（jqueryでのスライドトランジション）。私は物事の基本的なJQueryの側面を理解していますが、何らかの理由でそれがMeteor.isClientのスクリプトの側面に置かれてもうまくいかないようです。心に留めておいて、私は流行にかなり新しいです、包括的なjavascriptコードが大いに評価されるでしょう。一般的なJQueryやアニメーションとの相互作用

私の現在のコードは以下の通りです。

HTML

<body> 
    <div class='topmenu'> 
     <div class='menubutton'> 
      <span class="icon-bar1"></span> 
      <span class="icon-bar2"></span> 
      <span class="icon-bar3"></span> 
      <!--Needs to be fixed so that we only need to use one icon-bar class!!!--> 
     </div> 
     <div class='BanditDiv'> 
      <h1 class='BanditName'>Bandit</h1> 
     </div> 
    </div> 
    <div class='leftnav'> 
     <div class='sitenav'> 
      <a class='internalnav' href="#">Home</a> 
      <a class='internalnav' href="#">Musicians</a> 
      <a class='internalnav' href="#">Recording Space</a> 
     </div> 
    </div> 
    <div class='main'> 
    </div> 
</body>

CSS

body{ 
    margin: 0px 0px 0px 0px;  
} 

.navitem:hover{ 
    background-color: #000066; 
} 

.main{ 
    background-color: rgb(128,128,128); 
    height: 200vh; 
    width: 100vw; 
    margin: 0px 0px 0px 0px; 
    overflow-x:hidden; 
} 

.topmenu{ 
    position: fixed; 
    z-index: 10; 
    top: 0px; 
    width: 100vw; 
    height: 50px; 
    background: white; 
    border-bottom: 2px lightgray solid; 
} 

.BanditDiv{ 
    position: fixed; 
    top: 0px; 
    height: 50px; 
    width: 30vw; 
    margin-left: 35vw; 
    float: center; 
} 

.BanditName{ 
    text-align: center; 
    font: 400 25px/1.3 'Berkshire Swash', Helvetica, sans-serif; 
    color: #000066; 
} 

.menubutton{ 
    position: fixed; 
    top: 5px; 
    left: 5px; 
    height: 40px; 
    width: 40px; 
    border: 1px #cccccc solid; 
    background-color: white; 
    border-radius: 5px; 
} 

.menubutton:focus{ 
    outline: 0; 
} 

.icon-bar1 { 
    position: fixed; 
    top: 15px; 
    left: 10px; 
    margin: 0px 0px 0px 0px; 
    display: block; 
    width: 30px; 
    height: 2px; 
    background-color: #cccccc; 
    border-radius: 1px; 
} 

.icon-bar2 { 
    position: fixed; 
    top: 25px; 
    left: 10px; 
    margin: 0px 0px 0px 0px; 
    display: block; 
    width: 30px; 
    height: 2px; 
    background-color: #cccccc; 
    border-radius: 1px; 
} 

.icon-bar3 { 
    position: fixed; 
    top: 35px; 
    left: 10px; 
    margin: 0px 0px 0px 0px; 
    display: block; 
    width: 30px; 
    height: 2px; 
    background-color: #cccccc; 
    border-radius: 1px; 
} 

.leftnav{ 
    position: fixed; 
    top: 0px; 
    left: -300px; 
    width: 300px; 
    height: 100vh; 
    z-index: 9001; 
    background-color: yellow; 
}

出典

2016-01-28 Stephan Ng

あなたのJSは現在どのように見えますか、コードは現時点でどのように動作していますか？ –

私は実際にそれを働かせました！それは、角度やテンプレートの使用が不足しているためです。しかし、心配ありがとう！ –

あなたがそれを働かせたら、あなた自身の答えを出版してください。あなたの質問は、このトピックについて人々が興味を持っていることを明確にしています。 –

だから、これは私が動作するように見えソリューションを思い付いたものです。 Meteor.isClient内に角モジュールを作成しましたが、それはうまくいくように見えました。

if (Meteor.isClient) { 
    angular.module('sidebar',['angular-meteor']); 

    angular.module('sidebar').controller('SidebarCtrl', ['$scope', 
    function ($scope) { 
     function Menu (callback){ 
     $('.menubutton').on('click', function(){ 
      $('.leftnav').css({"box-shadow" : "2px 2px 2px #888888"}); 
      $('.leftnav').animate({left : "0px"}, 500, function(){ 
      $('.main').click(function() { 
       $('.leftnav').animate({left: "-302px"}, 500); 
       $('.leftnav').css({"box-shadow" : "none"}); 
      }); 
      $('.leftnav').click(function(event){ 
       event.stopPropagation(); 
      }); 
      }); 
     });  
     } 
     Menu(); 
    }]); 
}

出典

2016-01-29 23:57:22

一般的なJQueryやアニメーションとの相互作用

答えて

関連する問題