Question

我有一个url rotator，当有人点击“Next”按钮时会更改url，使用“Previous”按钮转到上一个url。我想在URL Change之间添加一个过渡动画。代码是：

的Javascript ：

var s = [

  "http://google.com",
  "http://yt.be",
];
var adr,
  i,
  x = 0,
  c = s.length;

function next() {
  x += 1;
  if (x > c - 1) {
    x = 0;
  }
  changeSrc();
}

function prev() {
  x -= 1;
  if (x <= 0) {
    x = c - 1;
  }
  changeSrc();
}

function changeSrc() {
  document.getElementById("fm").src = s[x];
}

HTML ：

<form class="navbar-form navbar-right" role="search">
  <input type="button" class="btn btn-success" value="PREV SITE" name="submit" onclick="prev()" />
  <input type="button" class="btn btn-success" value="NEXT SITE" name="submit" onclick="next()" />
</form>
<iframe id="fm" name="fm" style="position:fixed;margin-top:-25px;width:100%;height:95%" frameborder="0"></iframe>

对动画的任何建议？如果代码段不起作用，请在此处查看实时演示：YoYoBtcRotator.cf

Answer 1

您可以使用JQuery UI hide()和show()函数来产生您所追求的效果。

看看我放在一起的JSFiddle。我使用了div而不是iframe，但你得到的效果相同。

修改

Here是附加到所选div的链接的更新版本，而here是更新iframe网址的版本。由于网站阻止我对其进行编辑，最后一个网址不起作用，但是您输入的任何个人网站都应该完美无缺。

在Url更改上动画iframe

1 个答案:

修改