Question

您好我已经开始制作此网页了。

enter image description here

我拼命想让我的菜单在过渡时进出。我希望我的菜单从上到下按特定顺序飞入。

我已从原版中更新了此问题。

HTML：

<div id="flyin">
<form action="WoodEnglish.html" method="get">   
                <input id="Wood" type="image" src="Wood.png" alt="Submit" > 
</form>
</div>

的javascript：

<script type="text/javascript">

$(document).ready(function () {
  var currWidth = $(window).width();
  console.log(currWidth);

  var startPos = -1;
  var endPos = 1000;
  console.log(endPos);

  $('#flyin').animate({left: endPos},1000);

  $('#Wood, #submit2').click(function () {
        if (this.id == 'Wood') {
            $('#flyin').animate({left: endPos}, 1000);  
        }
        else if (this.id == 'submit1') {
            alert('Submit 2 clicked');
        }
    });
});

</script>

但是此代码仍存在两个问题

是这样的; var currWidth = $（window）.width（）;我认为。我需要我的按钮从屏幕外飞入屏幕，我不允许这样做。
atm它不会等到动画完成后再加载动作表单上的下一个html。

预先提交任何捐款

Answer 1

您已在<head>中引用了项目，甚至在它们加载之前。请将所有内容包装在document ready函数中：

$(document).ready(function () {
  var currWidth = $(window).width();
  console.log(currWidth);

  var startPos = -100;
  var endPos = (currWidth / 2) + (startPos / 2);
  console.log(endPos);

  $('#flyin').animate({left: endPos}, 1000);
});

小提琴：http://jsbin.com/pafigicabo/edit?js,output

Answer 2

好的，我想通了。这将使图像从屏幕外部飞到屏幕内部，然后再单击它时再次从屏幕内部飞到屏幕外部。

$(document).ready(function () {


  $('#flyin').animate({left: "1000px"},1000);

  $('#Wood, #submit2').click(function () {
        if (this.id == 'Wood') {
            $('#flyin').animate({left: "-1000px"}, 1000);  
        }
        else if (this.id == 'submit1') {
            alert('Submit 2 clicked');
        }
    });

});

如何使用jquery使图片在转换中进出

2 个答案: