質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.60%

vivus.jsのError

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,307
退会済みユーザー

退会済みユーザー

vivus.jsのError

svgアニメーションを操作するvivus.jsを使ってjsファイルに書き込んだんですが、開発ツールにて

vivus.min.js:1 Uncaught Error: Vivus [constructor]: "element" parameter is not related to an existing ID


と出て来ました。
下記サイトを参考に、
https://teratail.com/questions/95264

if ( $('#layer').length ) {}


の中で

new Vivus


としましたが、うまくいきません。
以下がソースになります。
どこが原因でしょうか。
よろしくお願いします。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="./vivus.min.js"></script>
<script>
if ( $('#layer').length ) {
   new Vivus('layer', { duration: 100 , start: 'autostart', pathTimingFunction: Vivus.EASE_OUT,}, function(obj){
   obj.el.classList.add('done');
   });
}
</script>
</head>
<style>
path {
 fill-opacity: 0;
 transition: fill-opacity 0.5s;
}
.done .cls-1 {
 fill: #333333;
 fill-opacity: 1;
}
.done .cls-2 {
 fill: #444444;
 fill-opacity: 1;
}
.done .cls-3 {
 fill: #555555;
 fill-opacity: 1;
}
.done .cls-4 {
 fill: #666666;
 fill-opacity: 1;
}
.done path {
 stroke: none;
}
</style>
<body>
<svg id="layer" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 203 60.98">
   <defs>
   </defs>
   <title>アセット 2</title>
   <g id="レイヤー_2" data-name="レイヤー 2">
   <g id="レイヤー_1-2" data-name="レイヤー 1">
   <path class="cls-1" fill="none" stroke="#000" d="M46.82,1.69V11.92H29.53V59.48H17.37V11.92H0V1.69Z"/>
   <path class="cls-2" fill="none" stroke="#000" d="M96.62,11.92H66V24.19H94.11v10H66V49.09H98V59.48H54.23V1.69H96.62Z"/>
   <path class="cls-3" fill="none" stroke="#000" d="M116.15,41.64a11.61,11.61,0,0,0,2.2,5.92q3,3.57,10.29,3.57a22,22,0,0,0,7.08-.94c3.45-1.2,5.17-3.44,5.17-6.7a4.94,4.94,0,0,0-2.53-4.43,27.29,27.29,0,0,0-8-2.71L124.08,35q-9.22-2-12.68-4.43-5.84-4-5.84-12.51a16.6,16.6,0,0,1,5.71-12.9Q117,0,128.07,0a25.71,25.71,0,0,1,15.77,4.84q6.54,4.85,6.85,14.06H139.08a8.24,8.24,0,0,0-4.66-7.41A15.93,15.93,0,0,0,127.23,10a13.74,13.74,0,0,0-7.64,1.88,6,6,0,0,0-2.86,5.25,5,5,0,0,0,2.82,4.63,34.5,34.5,0,0,0,7.68,2.39l10.14,2.4q6.67,1.56,10,4.19,5.16,4.08,5.16,11.8a16.58,16.58,0,0,1-6.12,13.16Q140.29,61,129.11,61q-11.42,0-18-5.16t-6.54-14.18Z"/>
   <path class="cls-4" fill="none" stroke="#000" d="M203,1.69V11.92H185.71V59.48H173.55V11.92H156.18V1.69Z"/>
   </g>
   </g>
</svg>
</body>
</html>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • 退会済みユーザー

    2019/04/12 11:46

    複数のユーザーから「意図的に内容が抹消された質問」という意見がありました
    解決後に編集機能を用いて質問内容を改変し関係のない内容にしたり、内容を削除する行為は禁止しています。
    投稿していただいた質問は、後に他の誰かが困ったときに助けになる情報資産になると考えるからです。
    「質問を編集する」ボタンから編集を行い、他のユーザにも質問内容が見えるように修正してください。

回答 1

checkベストアンサー

0

if ( $('#layer').length ) {}
onload時にしないといけないですね(でないとタグ読み込めてないので判定できない)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vivus/0.4.4/vivus.min.js"></script>
<script>
$(function(){
    if ( $('#layer').length ) {
        new Vivus('layer', { duration: 100 , start: 'autostart', pathTimingFunction: Vivus.EASE_OUT,}, function(obj){
        obj.el.classList.add('done');
        });
    }
});
</script>
</head>
<style>
path {
  fill-opacity: 0;
  transition: fill-opacity 0.5s;
}
.done .cls-1 {
  fill: #333333;
  fill-opacity: 1;
}
.done .cls-2 {
  fill: #444444;
  fill-opacity: 1;
}
.done .cls-3 {
  fill: #555555;
  fill-opacity: 1;
}
.done .cls-4 {
  fill: #666666;
  fill-opacity: 1;
}
.done path {
  stroke: none;
}
</style>

<body>
<svg id="layer" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 203 60.98">
    <defs>
    </defs>
    <title>アセット 2</title>
    <g id="レイヤー_2" data-name="レイヤー 2">
    <g id="レイヤー_1-2" data-name="レイヤー 1">
    <path class="cls-1" fill="none" stroke="#000" d="M46.82,1.69V11.92H29.53V59.48H17.37V11.92H0V1.69Z"/>
    <path class="cls-2" fill="none" stroke="#000" d="M96.62,11.92H66V24.19H94.11v10H66V49.09H98V59.48H54.23V1.69H96.62Z"/>
    <path class="cls-3" fill="none" stroke="#000" d="M116.15,41.64a11.61,11.61,0,0,0,2.2,5.92q3,3.57,10.29,3.57a22,22,0,0,0,7.08-.94c3.45-1.2,5.17-3.44,5.17-6.7a4.94,4.94,0,0,0-2.53-4.43,27.29,27.29,0,0,0-8-2.71L124.08,35q-9.22-2-12.68-4.43-5.84-4-5.84-12.51a16.6,16.6,0,0,1,5.71-12.9Q117,0,128.07,0a25.71,25.71,0,0,1,15.77,4.84q6.54,4.85,6.85,14.06H139.08a8.24,8.24,0,0,0-4.66-7.41A15.93,15.93,0,0,0,127.23,10a13.74,13.74,0,0,0-7.64,1.88,6,6,0,0,0-2.86,5.25,5,5,0,0,0,2.82,4.63,34.5,34.5,0,0,0,7.68,2.39l10.14,2.4q6.67,1.56,10,4.19,5.16,4.08,5.16,11.8a16.58,16.58,0,0,1-6.12,13.16Q140.29,61,129.11,61q-11.42,0-18-5.16t-6.54-14.18Z"/>
    <path class="cls-4" fill="none" stroke="#000" d="M203,1.69V11.92H185.71V59.48H173.55V11.92H156.18V1.69Z"/>
    </g>
    </g>
</svg>
</body>
</html>


こんな感じ

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/07/25 13:05

    へぇ

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.60%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る