单独工作的javascript使淋浴演示空白

我希望这不会含糊其辞。如果是这样，请说。

我正在尝试在淋浴演示中获得一些交互性。交互式图的脚本在 jsfiddle 和本地 html 上都可以正常工作。当我将相关位复制到 Shower-presentation-html-file 的一个部分（class="slide"）时，它加载得很好。

但是当我单击其中一个时间跨度（按钮 b2007 或 b2016）以动画/裁剪图表时，页面会变黑。如果我使用箭头键来回导航，我可以返回幻灯片，我看到脚本确实有效，因为它确实向我显示了所选的时间跨度。

所以问题似乎是，当我调用 .click（function） 时，它也以某种方式调用了 shower/shower.min.js 中的某些东西。由于我是一个完全的初学者，我不敢改变那里的任何东西，而是希望你有一个绝妙的主意。

$('#b2007').click(function() {
  $('#trendcont').animate({
    width: '300px'
  }, 1000);
});
$('#b2016').click(function() {
  $('#trendcont').animate({
    width: '800'
  }, 1500);
});

#trendcont {
  border: 0px solid #000;
  height: 350px;
  width: 1px;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
to begin, click on one of the time spans.
<a href="#" id="b2007">2004-2007</a>
<a href="#" id="b2016">2004-2016</a>
<div id='trendcont'>
  <iframe scrolling="no" style="border:none;" width="800" height="800" src="https://www.google.com/trends/fetchComponent?hl=de&q=Jatropha,palm oil&cmpt=q&tz=Etc/GMT-1&tz=Etc/GMT-1&content=1&cid=TIMESERIES_GRAPH_0&export=5&w=800&h=800">
  </iframe>
</div>