将text.json解析为jquery.animation？

Question

我需要将text.json解析为我的jquery.animation（）。

我想实现与此处相同的功能，但是我想像在本示例中一样使用“数据”属性，而是使用“ ID”属性作为每个按钮的键值来解析文本，以便将文本显示到middleBubble中。 我和本示例之间唯一的不同是，我的气泡正在切换，因此需要在动画之后显示文本。

我在将其包装到代码中时遇到麻烦，因此可以将其混搭到我的jquery.animation（）中，这个咏叹调对我来说是新的。 有人可以帮我编写此代码，以便我了解其工作原理。

我的HTML动画：

 <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>

我的CSS动画：

/**
 *
 * 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我想解析成我的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

尝试这样的事情：

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

    })