亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何重復淡入淡出和動畫?

如何重復淡入淡出和動畫?

慕田峪7331174 2023-05-11 16:34:27
我運行此代碼并且它有效,但是當 $(".box3").click 時,$(".box1") 不會淡入和動畫,它會直接顯示在窗口中。之后 $(".box2") 和 $(".box3") 在第二次出現了一些問題。難道fadeIn和animate只運行一次?我想運行更多次但仍然具有淡入、淡出和動畫效果。謝謝你的回答。$(function() {  $(".box2,.box3").hide();  $(".box1").click(function() {    $(".box1").animate({      left: "1200px"    }, 1000).fadeOut();    $(".box2").fadeIn();  });  $(".box2").click(function() {    $(".box2").animate({      left: "1200px"    }, 1000).fadeOut();    $(".box3").fadeIn();  });  $(".box3").click(function() {    $(".box3").animate({      left: "1200px"    }, 1000).fadeOut();    $(".box1").fadeIn();  });})body {  position: relative;}.box1 {  width: 300px;  height: 300px;  background-color: rgb(255, 0, 0);  position: absolute;  top: 300px;  left: 500px;}.box2 {  width: 300px;  height: 300px;  background-color: rgb(2, 149, 246);  position: absolute;  top: 300px;  left: 500px;}.box3 {  width: 300px;  height: 300px;  background-color: rgb(22, 187, 0);  position: absolute;  top: 300px;  left: 500px;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="box1"></div><div class="box2"></div><div class="box3"></div>
查看完整描述

1 回答

?
翻翻過去那場雪

TA貢獻2065條經驗 獲得超14個贊

解釋:由于所有元素都有類似的事件綁定,我創建了一個commonEvent函數,減少了代碼。該fadeOut函數接受回調函數作為參數,該函數在fadeOut執行時執行。單擊時.box1,其left屬性設置為1200px。500px這就是為什么,我在它的回調函數中將它的值改回了,即初始值。


$(function() {

  $(".box2,.box3").hide();


  $(".box1").click(function() {

    commonEvent($(this), $(".box2"));

  });


  $(".box2").click(function() {

    commonEvent($(this), $(".box3"));

  });


  $(".box3").click(function() {

    commonEvent($(this), $(".box1"));

  });

})


function commonEvent(element, other) {

  element.animate({

    left: "1200px"

  }, 1000).fadeOut("normal", () => {

    element.css("left", "500px");

  })

  other.fadeIn();

}

body {

  position: relative;

}


.box1 {

  width: 300px;

  height: 300px;

  background-color: rgb(255, 0, 0);

  position: absolute;

  top: 300px;

  left: 500px;

}


.box2 {

  width: 300px;

  height: 300px;

  background-color: rgb(2, 149, 246);

  position: absolute;

  top: 300px;

  left: 500px;

}


.box3 {

  width: 300px;

  height: 300px;

  background-color: rgb(22, 187, 0);

  position: absolute;

  top: 300px;

  left: 500px;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="box1"></div>

<div class="box2"></div>

<div class="box3"></div>


查看完整回答
反對 回復 2023-05-11
  • 1 回答
  • 0 關注
  • 146 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號