第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

如何重復(fù)淡入淡出和動(dòng)畫(huà)?

如何重復(fù)淡入淡出和動(dòng)畫(huà)?

慕田峪7331174 2023-05-11 16:34:27
我運(yùn)行此代碼并且它有效,但是當(dāng) $(".box3").click 時(shí),$(".box1") 不會(huì)淡入和動(dòng)畫(huà),它會(huì)直接顯示在窗口中。之后 $(".box2") 和 $(".box3") 在第二次出現(xiàn)了一些問(wèn)題。難道fadeIn和animate只運(yùn)行一次?我想運(yùn)行更多次但仍然具有淡入、淡出和動(dòng)畫(huà)效果。謝謝你的回答。$(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 回答

?
翻翻過(guò)去那場(chǎng)雪

TA貢獻(xiàn)2065條經(jīng)驗(yàn) 獲得超14個(gè)贊

解釋?zhuān)河捎谒性囟加蓄?lèi)似的事件綁定,我創(chuàng)建了一個(gè)commonEvent函數(shù),減少了代碼。該fadeOut函數(shù)接受回調(diào)函數(shù)作為參數(shù),該函數(shù)在fadeOut執(zhí)行時(shí)執(zhí)行。單擊時(shí).box1,其left屬性設(shè)置為1200px。500px這就是為什么,我在它的回調(diào)函數(shù)中將它的值改回了,即初始值。


$(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>


查看完整回答
反對(duì) 回復(fù) 2023-05-11
  • 1 回答
  • 0 關(guān)注
  • 142 瀏覽
慕課專(zhuān)欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)