Javascript jQuery'的实现；制作动画'；用流星_Javascript_Jquery_Meteor

Javascript jQuery'的实现；制作动画'；用流星

javascript jquery meteor

Javascript jQuery'的实现；制作动画'；用流星,javascript,jquery,meteor,Javascript,Jquery,Meteor,我目前正在学习使用Meteor，在我的一个模板中实现jQuery“animate”功能时遇到了问题。我以这个伟大的样板文件为例，并尝试实现以下功能： home.html <template name="home"> <div id="front-page"> <div class="container"> <div class="page-bottom-nav"> <div clas

我目前正在学习使用Meteor，在我的一个模板中实现jQuery“animate”功能时遇到了问题。我以这个伟大的样板文件为例，并尝试实现以下功能：

home.html

<template name="home">

    <div id="front-page">
      <div class="container">
        <div class="page-bottom-nav">
           <div class="row">
              {{#each feature}}
                <div class="col-xs-6 col-md-3">
                <div class="thumbnail aligned center home-page-nav-boxes">
                    <a href="{{path}}" class="link unstyled no-underline {{color}} padding wrapper">
                        <i class="glyphicon {{glyphicon}} image-links-home-page"></i>
                      <div class="headline text-links-home-page">{{text}}</div>
                    </a>
                </div>
                </div>
            {{/each}}
           </div>
         </div>
     </div>
    </div>

  <div id="about">
    About
  </div>
  <div id="explore">
    Explore
  </div>
  <div id="blog">
    Blog
  </div>
  <div id="press-contact">
    Press/Contact
  </div>


</template>

<body>
    {{> home}}
</body>

<template name="home">

    <div id="front-page">
      <div class="container">
        <div class="page-bottom-nav">
           <div class="row">
              {{#each feature}}
                <div class="col-xs-6 col-md-3">
                <div class="thumbnail aligned center home-page-nav-boxes">
                    <a href="{{path}}" class="link unstyled no-underline {{color}} padding wrapper">
                        <i class="glyphicon {{glyphicon}} image-links-home-page"></i>
                      <div class="headline text-links-home-page">{{text}}</div>
                    </a>
                </div>
                </div>
            {{/each}}
           </div>
         </div>
     </div>
    </div>

  <div id="about" style="height:500px">
    About
  </div>
  <div id="explore" style="1000px">
    Explore
  </div>
  <div id="blog" style="height:750px">
    Blog
  </div>
  <div id="press-contact">
    Press/Contact
  </div>


</template>

主页。更少

    Template.home.helpers({
      'feature' : function () {
        return [
          { 'text' : 'About', 'glyphicon' : 'glyphicon-sunglasses', 'color' : 'hover-yellow', 'path' : '#about' },
          { 'text' : 'Explore', 'glyphicon' : 'glyphicon-road', 'color' : 'hover-red', 'path' : '#explore' },
          { 'text' : 'Blog', 'glyphicon' : 'glyphicon-pencil', 'color' : 'hover-blue', 'path' : '#blog' },
          { 'text' : 'Press/Contact', 'glyphicon' : 'glyphicon-envelope', 'color' : 'hover-green', 'path' : '#press-contact' }
        ];
      },
    });

    Template.home.events ({

    });

    Template.home.rendered = function () {

        // @see: http://stackoverflow.com/questions/5284814/jquery-scroll-to-div
        $('a[href*=#]:not([href=#])').click(function (event) {
        alert("Content has been clicked");
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
          var target = $(this.hash);
          console.log(target);
          target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
          if (target.length) {
            event.preventDefault();
            console.log(target.offset().top);
            $('html, body').animate({
              scrollTop: target.offset().top
            }, 1000);
          return false;
          }
        }
        return true;
    });
  };

@import 'base';


#main {
    .image-links-home-page.glyphicon {
        font-size: @font-size-giant;
    }

    .hover-yellow:hover {
        color: yellow;
    }

    .hover-green:hover {
        color: green;
    }

    .hover-red:hover {
        color: red;
    }

    .hover-blue:hover {
        color: blue;
    }

    #front-page {
        height: 100%;
        width: 100%;
        background-image: url('images/mt-cook.jpg');
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        background-position: fixed;
        position: relative;
    }

    .page-bottom-nav {
        bottom: 0;
        position: absolute;
        width: 90%;
        padding-left: @padding-enormous-horizontal;
        padding-right: @padding-enormous-horizontal;
    }

    .home-page-nav-boxes {
        padding: @padding-giant-vertical;
        opacity: 0.6;
        transition: 0.7s color;
    }

    .text-links-home-page {
        font-size: @font-size-large;
        padding-top: @padding-large-vertical;
    }

    .navbar.past-front-page {
        background-color:#fff;
        color:#444;
        opacity: 0.5;
    }

    #about {
        height: 100%;
        background-color: yellow;
    }

    #explore {
        height: 100%;
        background-color: red;
    }

    #blog {
        height: 100%;
        background-color: blue;
    }

    #press-contact {
        height: 100%;
        background-color: green;
    }

}

Template.home.helpers({
      'feature' : function () {
        return [
          { 'text' : 'About', 'glyphicon' : 'glyphicon-sunglasses', 'color' : 'hover-yellow', 'path' : '#about' },
          { 'text' : 'Explore', 'glyphicon' : 'glyphicon-road', 'color' : 'hover-red', 'path' : '#explore' },
          { 'text' : 'Blog', 'glyphicon' : 'glyphicon-pencil', 'color' : 'hover-blue', 'path' : '#blog' },
          { 'text' : 'Press/Contact', 'glyphicon' : 'glyphicon-envelope', 'color' : 'hover-green', 'path' : '#press-contact' }
        ];
      },
});

Template.home.events({
  'click a[href^="#"]': function(event, template) {
    var $target = $(event.currentTarget.hash);
    $('html, body').animate({
      scrollTop: $target.offset().top
    });
    event.preventDefault();
  }
});

这些文件都位于我的应用程序树中的

client

文件夹中。

console.log

和

alert

按预期调试工作，但不进行滚动。。。

提前感谢您的帮助，如果我在这里完全遗漏了什么，一定要让我知道

删除渲染函数并使用Template.home.events
试试看
home.html

<template name="home"> <div id="front-page"> <div class="container"> <div class="page-bottom-nav"> <div class="row"> {{#each feature}} <div class="col-xs-6 col-md-3"> <div class="thumbnail aligned center home-page-nav-boxes"> <a href="{{path}}" class="link unstyled no-underline {{color}} padding wrapper"> <i class="glyphicon {{glyphicon}} image-links-home-page"></i> <div class="headline text-links-home-page">{{text}}</div> </a> </div> </div> {{/each}} </div> </div> </div> </div> <div id="about"> About </div> <div id="explore"> Explore </div> <div id="blog"> Blog </div> <div id="press-contact"> Press/Contact </div> </template>

<body> {{> home}} </body> <template name="home"> <div id="front-page"> <div class="container"> <div class="page-bottom-nav"> <div class="row"> {{#each feature}} <div class="col-xs-6 col-md-3"> <div class="thumbnail aligned center home-page-nav-boxes"> <a href="{{path}}" class="link unstyled no-underline {{color}} padding wrapper"> <i class="glyphicon {{glyphicon}} image-links-home-page"></i> <div class="headline text-links-home-page">{{text}}</div> </a> </div> </div> {{/each}} </div> </div> </div> </div> <div id="about" style="height:500px"> About </div> <div id="explore" style="1000px"> Explore </div> <div id="blog" style="height:750px"> Blog </div> <div id="press-contact"> Press/Contact </div> </template>

查看演示
结果发现问题与
和
标记的100%大小有关。在这些标记及其行为的帮助和良好概述下，滚动现在可以按预期工作。请注意，在
Template.home.events
或
Template.home.rendered
中调用函数可以在这里工作。
Template.home.rendered=function（）{-->}很好的地方-它在我的代码中，只是在传输到SO时错过了：）谢谢，但恐怕没有什么乐趣…我可以在控制台中找到目标变量，但是，动画片不火，嗯，那很好用…只是不在我的应用程序中！我想知道它是否与我安装的某个软件包冲突-有什么想法吗？没有，请删除呈现的函数并使用Template.home.events。