jQueryで要素の「クリック」イベントとアニメーションを同時に呼び出す方法は？

私はHTMLページに4つのdiv要素を持っています。ページの読み込みを開始する必要があります。ユーザーがクリックすると移動中に最初のdivでサイズを変更する必要があります。 div要素はページの読み込みを開始する必要があり、最初のdivはユーザーがクリックするとサイズを変更する必要があります。私は、進行中のアニメーションをクリックイベントと組み合わせる方法を知らない。ここにコード：jQueryで要素の「クリック」イベントとアニメーションを同時に呼び出す方法は？

HTML 
<html> 
<head> 
    <title>jQuery Animation</title> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

</head> 

<body> 

    <div id="id_1" style="background:purple; width:100px; height:100px; border-radius:50%; position:absolute; z-index:1000;"></div> 

    <div id="id_2" style="background:blue; width:100px; height:100px; position:absolute;"></div> 

    <div id="id_3" style="background:yellow; width:300px; height:100px;position:absolute;"></div> 

    <div id="id_4" style="background:green; width:300px; height:100px; border-radius:50%;position:relative; float:right;"></div> 

</body> 
<script src="script2.js"></script> 

</html> 

jQuery 
$(document).ready(function(){ 
$("#id_1").animate({left:700, top: 500}, 10000).animate({left:0},10000).animate({top:0},10000); 


$("#id_2").animate({left:800}, 10000).animate({top:400},10000).animate({left:0},10000).animate({top:0},10000); 

$("#id_3").animate({top: 500}, 10000).animate({left:400},10000).animate({left:0, top:0},10000); 

$("#id_4").animate({top: 500, right: 500}, 10000).animate({top:700},2000).animate({right:800},2000).animate({top:0, right:0},10000); 
});`enter code here` 

$("#id_1").click(function(){ 

    $("#id_1").animate({ 

     "width":"500px", 

     "height":"500px" 

    }); 

});

出典

2017-06-19 matrim.cauton

文書内にクリック機能を追加します。

jQuery 
 
$(document).ready(function() { 
 

 
$.fn.divOneAnimations = function() { 
 
    this.animate({ 
 
     left: 700, 
 
     top: 500 
 
    }, 10000).animate({ 
 
     left: 0 
 
    }, 10000).animate({ 
 
     top: 0 
 
    }, 10000); 
 
}; 
 

 
$("#id_1").on('click', function() { 
 
    $("#id_1").animate({ 
 
     height: 500, 
 
     width: 500 
 
    }, { 
 
     duration: 1000, 
 
     queue: false 
 
    }); 
 
}).divOneAnimations(); 
 

 
/* 
 
    $("#id_1").animate({ 
 
    left: 700, 
 
    top: 500 
 
    }, 10000).animate({ 
 
    left: 0 
 
    }, 10000).animate({ 
 
    top: 0 
 
    }, 10000); 
 

 
    $("#id_1").on('click', function() { 
 
    $(this).css({ 
 
     width: "500px", 
 
     height: "500px" 
 
    }, 2500); 
 
    }); 
 
*/ 
 

 

 
    $("#id_2").animate({ 
 
    left: 800 
 
    }, 10000).animate({ 
 
    top: 400 
 
    }, 10000).animate({ 
 
    left: 0 
 
    }, 10000).animate({ 
 
    top: 0 
 
    }, 10000); 
 

 
    $("#id_3").animate({ 
 
    top: 500 
 
    }, 10000).animate({ 
 
    left: 400 
 
    }, 10000).animate({ 
 
    left: 0, 
 
    top: 0 
 
    }, 10000); 
 

 
    $("#id_4").animate({ 
 
    top: 500, 
 
    right: 500 
 
    }, 10000).animate({ 
 
    top: 700 
 
    }, 2000).animate({ 
 
    right: 800 
 
    }, 2000).animate({ 
 
    top: 0, 
 
    right: 0 
 
    }, 10000); 
 
}); 
 
`enter code here`

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="id_1" style="background:purple; width:100px; height:100px; border-radius:50%; position:absolute; z-index:1000;">First Div</div> 
 

 
<div id="id_2" style="background:blue; width:100px; height:100px; position:absolute;"></div> 
 

 
<div id="id_3" style="background:yellow; width:300px; height:100px;position:absolute;"></div> 
 

 
<div id="id_4" style="background:green; width:300px; height:100px; border-radius:50%;position:relative; float:right;"></div>

出典

2017-06-19 15:23:44

私は（ 'クリック'、機能（）{ $（この）の.css（{ 幅に$（ "＃のID_1"）でそれを行うために管理：「500pxなど。 "、高さ：" 500px " }、2500）; }）; CSSではなく何らかの方法でアニメーションで行うことができます –

回答が編集されています、確認してください –

jQueryで要素の「クリック」イベントとアニメーションを同時に呼び出す方法は？

答えて

関連する問題