當前位置:編程學習大全網 - 源碼下載 - jquery如何設計壹個div出現動畫,掉下來彈動兩下之後停止

jquery如何設計壹個div出現動畫,掉下來彈動兩下之後停止

$("#按鈕id").click(function(){

$("#Divid").slideDown("毫秒數");//對display:none才有效,向下彈出,還有slideUp()相反

});

基本的顯示。

讓其到指定位置,

$(“#divID”).css({left:"1px",top:"1px"})

$(“#divID”).animate();//可以實現動畫效果。自定義,不太清楚彈幾下。。什麽意思,但是基本上是這個意思。

追問:

可以用animate設置向上彈50px之後掉下,再向上彈50px掉下之後穩定嗎?可以的話,給個實例啊。麻煩了。。。

追答:

<html>

<head>

<title></title>

<script type="text/javascript" src="/jquery-1.6.1.min.js"></script>

<script type="text/javascript">

$(function () {

$("#btn1").mouseenter(

function () { $("#div1").slideDown(1000) } //slideDown 和slideUp只對display:none有效

).click(function () {

var div1 = $("#div1"); //獲取jquery對象

var id = setInterval(function () { div1.animate({ top: "+=30" }, 1000).animate({ top: "-=30" }, 1000); }, 2000); /*讓圖片上下浮動,重復執行

不要鏈式控制css屬性,應在fn。

*/

div1.click(function () {

clearInterval(id); //清除定時器

div1.stop(); //停止動畫 2參數,1立即停止動畫,第二個清除動畫列表 bool

});

});

});

</script>

</head>

<body>

<input id="btn1" type="button" value="點我就動了" />

<div id="div1" style="width: 300px; height: 300px; position: absolute; top: 50px;

left: 50px; background-color: Red; display: none;">

點我停止動畫

</div>

</body>

</html>

  • 上一篇:《紅樓夢》 摘抄
  • 下一篇:微投和小投P1 Pro和P1有區別嗎?
  • copyright 2024編程學習大全網