0

このアニメーションを実装しようとしています

専門用語.html

<ion-view title="Jargon">
  <ion-content>
    <a class="item" href="#/jargon"></a>

<div class="container">

  <div data-card="4" class="card"><span>Click Me</span></div>
  <div data-card="3" class="card"><span>Click Me</span></div>
  <div data-card="2" class="card"><span>Click Me</span></div>
  <div data-card="1" class="card"><span>Click Me</span></div>
  <div data-card="0" class="card"><span>Click Me</span></div>

</div>
</ion-content>

コントローラー: jargonController.js

angular.module('starter.jargonController', ['ionic'])
.controller('jargonCtrl', function (){
    var rotate, timeline;

  rotate = function() {
    return $('.card:first-child').fadeOut(400, 'swing', function() {
      return $('.card:first-child').appendTo('.container').hide();
    }).fadeIn(400, 'swing');
  };

  timeline = setInterval(rotate, 1200);

  $('.card').click(function() {
    return rotate();
  });

});

次のエラーが表示されます。

エラー: $ が定義されていません @ http://localhost:8100/js/controllers

ReferenceError: $ が定義されていません

エラーを生成するのは次の行です。

    return $('.card:first-child').fadeOut(400, 'swing', function() {

私は何が欠けていますか？

アップデート

こんな感じでレイアウトが出来ました。cssファイルが見えないようです。専門用語

ここに必ず追加しましたが：

.state('jargon', {
        url: 'jargon',
        templateUrl: 'templates/jargon.html',
        controller: 'jargonCtrl',
        css: 'css/jarg.css'
4

1 に答える 1

0

jQuery が不足している可能性があります。jQuery を使い続けたい場合は、https: //jquery.com/ を含めることができます。

または、angular を使用して別のアプローチを使用することもできます。

<ion-view title="Jargon">
  <ion-content>
    <a class="item" href="#/jargon"></a>

    <div class="container">

      <div ng-repeat="n in [0,1,2,3,4]" class="card"><span ng-click="rotate()">Click Me</span></div>

    </div>
    </ion-content>

と：

angular.module('starter.jargonController', ['ionic'])
        .controller('jargonCtrl', ['$scope', function ($scope) {
                $scope.rotate = function () {
                    //angular code for your animation
                };
            }]);
于 2016-03-31T14:28:47.510 に答える