Parsing text.json into jquery.animation?

Question

I need to parse text.json into mine jquery.animation().

I want to achieve the same thing achieved here , but instead using “data” attributes like they are using on this example, I would like to parse the text using "ID" property as key value for each button so it will display text into middleBubble. Only different thing between mine and this example is that mine bubble is toggling, so text needs to be displayed after the animation.

I am having trouble wrap this into code so I can mash it into mine jquery.animation(), this aria is new to me. Can someone help me code this so I can understand how this works.

Mine HTML for the animation :

 <section class='circle-animation'>
        <div class="container-fluid">
          <div class="row">
            <div class="hidden-xs hidden-sm">
              <div class="col-sm-6 col-sm-offset-3 col-sm-pull-1">
                <div id="middlepapir" class="jumbotron">
                  <div class="row">

                    <img id="placeholder" class="papir img-responsive" src="img/circle/11.png" alt="">
                    <div class="row">
                      <div id="all" class="move1 col-sm-4 col-xs-4 col-md-push-4"> 
                          <a href="#"><img class="position1 round" src="img/circle/off/home-all-icon-off.png"></a>
                      </div>
                    </div>
                    <div class="row">
                      <div id="cover" class="move2 col-sm-4 col-xs-4 col-md-push-1">
                          <a href="#"><img class="position2 round" src="img/circle/off/home-cover-icon-off.png"></a>
                      </div>
                    </div>
                    <div class="row">
                      <div id="design" class="move3 col-sm-4 col-xs-4 col-md-push-7">
                          <a href="#"><img class="position3 round" src="img/circle/off/home-design-icon-off.png"></a>
                      </div>
                    </div>
                    <div class="row">
                      <div id="diy" class="move4 col-sm-4 col-xs-4">
                          <a href="#"><img class="position4 round" src="img/circle/off/home-diy-icon-off.png"></a>
                      </div>
                    </div>
                    <div class="row">
                      <div id="marketing" class="move5 col-sm-4 col-xs-4 col-md-push-8">
                          <a href="#"><img class="position5 round" src="img/circle/off/home-marketing-icon-off.png"></a>
                      </div>
                    </div>
                    <div class="row">
                      <div id="other" class="move6 col-sm-4 col-xs-4 col-md-push-1">
                          <a href="#"><img class="position6 round" src="img/circle/off/home-other-icon-off.png"></a>
                      </div>
                    </div>
                    <div class="row">
                      <div id="special" class="move7 col-sm-4 col-xs-4 col-md-push-4">
                          <a href="#"><img class="position7 round" src="img/circle/off/home-special-icon-off.png"></a>
                      </div>
                    </div>
                    <div class="row">
                      <div id="vip" class="move8 col-sm-4 col-xs-4 col-md-push-7">
                          <a href="#"><img class="position8 round" src="img/circle/off/home-vip-icon-off.png"></a>
                      </div>
                    </div>
                  </div>
                </div>   
              </div>  
            </div>  
          </div>    
        </div>
      </section>

Mine CSS for animation:

/**
 *
 * Position icons into circle (SO)
 * 
 */

/* -------Up------ */ 

.move1 {

}

.move2 {
  margin-top: -80px;
}

.move3 {
  margin-top: -140px;
}
/* --------------- */


/* ------Middle---- */

.move5 {
  margin-top: -140px;
}


/* ---------------- */


/* ------Down------ */

.move7 {
  margin-top: -80px;
}

.move8 {
  margin-top: -195px;
}

/* --------------- */

.round {
  width: 140px;
  height: 140px;
}

.jumbotron {
  display: inline-block;
  width: 700px;
  height: 600px;
}

.jumbotron img.img-responsive {
  width: 450px;
  position: absolute;
  margin-top: 120px;
  margin-left: 60px;
}

Jquery:

// jQuery script for are Circle div whit Scroll Reveal Script

$(document).ready(function(){
    /*==========================================
    SCROLL REVEL SCRIPTS
    =====================================================*/
    window.scrollReveal = new scrollReveal();
    /*==========================================
    WRITE  YOUR  SCRIPTS BELOW
    =====================================================*/
    $('.round').click(function(){
       $('.papir').animate({
        width: ['toggle', 'swing'],
        height: ['toggle', 'swing'],
       }); 
    });    

});

text.json I would like to parse into mine html:

var a = {
    "all":{
        "id":"all",
        "data": {
            "datatext": "Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
        }
    }, "cover": {
        "id":"cover",
        "data": {
            "datatext": "Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
        }
    }, "diy": {
        "id":"diy",
        "data": {
            "datatext": "Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
        }
    }, "marketing": {
        "id": "marketing",
        "data": {
            "datatext": "Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
        }
    }, "other": {
        "id": "other",
        "data": {
            "datatext": "Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
        }
    }, "special": {
        "id": "special",
        "data": {
            "datatext": "Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
        }
    }, "vip": {
        "id": "vip",
        "data": {
            "datatext": "Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
        }
    }, "design": {
        "id": "design",
        "data": {
            "datatext": "Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
        }
    }
}

Answer 1

Try something like this :

var a = {
    "all":{
        "id":"all",
        "data": {
            "datatext": "Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
        }
    }, "cover": {
        "id":"cover",
        "data": {
            "datatext": "Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
        }
    }, "diy": {
        "id":"diy",
        "data": {
            "datatext": "Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
        }
    }, "marketing": {
        "id": "marketing",
        "data": {
            "datatext": "Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
        }
    }, "other": {
        "id": "other",
        "data": {
            "datatext": "Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
        }
    }, "special": {
        "id": "special",
        "data": {
            "datatext": "Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
        }
    }, "vip": {
        "id": "vip",
        "data": {
            "datatext": "Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
        }
    }, "design": {
        "id": "design",
        "data": {
            "datatext": "Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
        }
    }
}


    $('div[class^="move"]').on('mouseover',function(){
        var id = $(this).attr('id');
        alert(a[id].data.datatext)
        $('.main-view').text(a[id].data.datatext);//.main-view is the text body where you display it

    })