Question

功能性：

当用户点击第1页的按钮时，它会将它们带到第2页。在页面转换期间，我已经包含了一些动画：

1。）按钮会爆炸。 2.）第1页将滑出并淡出，而第2页将滑入并淡入并反弹。

已完成的工作：

我已经使用了.animate＆amp; .toggle jQuery在页面转换期间实现以下动画。

问题： 工作正常：

页面转换：当用户点击第1页到第2页以及用户从第2页导航到第1页时。
动画：当用户点击按钮，页面滑动和淡入淡出时，按钮会爆炸。

不能正常工作的是，当用户从第2页导航到第1页时，执行爆炸动画的按钮已消失，并且不会显示在原始位置。

发生了什么事？

**代码：

function PageTransit() {

  $('#Button1').toggle("explode", {
    duration: slideDuration
  }, {
    easing: 'easeOutElastic',
    queue: false
  });


  $('#Page1').fadeOut({
    duration: slideDuration,
    queue: false
  });
  $('#Page1').animate({
    'left': '1921px'
  }, {
    duration: slideDuration,
    easing: 'easeOutElastic',
    queue: false
  });

  //Method  call to slide and fade in second page to the left padding
  $('#Page2').fadeIn({
    duration: slideDuration,
    queue: false
  });
  $('#Page2').animate({
    'left': '0px'
  }, {
    duration: slideDuration,
    easing: 'easeOutElastic',
    queue: false
  });
}

function Page() {
  console.log("Page");

  $('#Page2').fadeOut({
    duration: slideDuration,
    queue: false
  });
  $('#Page2').animate({
    'left': '1921px'
  }, {
    duration: slideDuration,
    easing: 'easeOutElastic',
    queue: false
  });

  $('#Page1').fadeIn({
    duration: slideDuration,
    queue: false
  });
  $('#Page1').animate({
    'left': '0px'
  }, {
    duration: slideDuration,
    easing: 'easeOutElastic',
    queue: false
  });
}

<div id="Page1" align="center" style="position:absolute; width:1920px; height:1080px; z-index=1; top:0px; left:0px;">
  <img src="lib/img/Background.png" />
  <button id="Button1" onclick="PageTransit()">
    <img src="lib/img/Button.png">
  </button>

  <button id="Back" onclick="Home()">
    <img src="lib/img/HomeButton.png">
  </button>
</div>

<div id="Page2" align="center" style="position:absolute; width:1920px; height:1080px; background-repeat: no-repeat; display: none; z-index=2; top:0px; left:1921px; ">
  <button id="PageBack" onclick="Page()">
    <img src="lib/img/VideoBackButton.png">
  </button>
</div>

**

Answer 1

正如用户cske指出的那样，你需要在页面返回功能中放回.toggle'explode'。

function PageTransit() {

  $('#Button1').toggle("explode", {
    duration: slideDuration
  }, {
    easing: 'easeOutElastic',
    queue: false
  });


  $('#Page1').fadeOut({
    duration: slideDuration,
    queue: false
  });
  $('#Page1').animate({
    'left': '1921px'
  }, {
    duration: slideDuration,
    easing: 'easeOutElastic',
    queue: false
  });

  //Method  call to slide and fade in second page to the left padding
  $('#Page2').fadeIn({
    duration: slideDuration,
    queue: false
  });
  $('#Page2').animate({
    'left': '0px'
  }, {
    duration: slideDuration,
    easing: 'easeOutElastic',
    queue: false
  });
}

function Page() {
  console.log("Page");
  $('#Button1').toggle("explode", {
    duration: slideDuration
  }, {
    easing: 'easeOutElastic',
    queue: false
  });
  $('#Page2').fadeOut({
    duration: slideDuration,
    queue: false
  });
  $('#Page2').animate({
    'left': '1921px'
  }, {
    duration: slideDuration,
    easing: 'easeOutElastic',
    queue: false
  });

  $('#Page1').fadeIn({
    duration: slideDuration,
    queue: false
  });
  $('#Page1').animate({
    'left': '0px'
  }, {
    duration: slideDuration,
    easing: 'easeOutElastic',
    queue: false
  });
}

用户点击PageBack按钮

1 个答案: