JqueryUiから使用したこのスクリプトを微調整しましたが、問題があります。両方のdivが同時に開始します。特別ゾーンにドラッグした後でのみ、各ボールのアニメーションを開始したいと思います。
質問:アニメーションを作成した後、一度に1つずつアニメーション化して、興味のあるページを開くにはどうすればよいですか?彼女の特性を持つ各ボール。
私が使用しているJavaScriptコード:
$(document).ready(function(){
$(function() {
$("#ball").draggable({ containment: "#cadru_principal", scroll: false, revert: "invalid" });
$("#ball2").draggable({ containment: "#cadru_principal", scroll: false, revert: "invalid" });
$( "#dropable" ).droppable({
drop: function( event, ui ) {
$("#ball").animate({left: '490px', top: '300px'}, 900);
setTimeout(function() {window.location.href = "contact.html"}, 900);
$("#ball2").animate({left: '490px', top: '300px'}, 900);
setTimeout(function() {window.location.href = "pictori.html"}, 900);
$( this )
.find( "p" )
.html( "Ai nimerit" );
}
});
});
});
HTML:
<div id="ball" class="ui-widget-content"></div>
<div id="ball2" class="ui-widget-content"></div>
<div id="dropable" class="ui-widget-header">
<p>Drop me here</p>
CSS:
#ball {
position: absolute;
left: 183px;
top: 467px;
width: 42px;
height: 40px;
display: block;
background: url(../Images/ball.png) no-repeat;
background-position: top left;
z-index: 1002;
}
#ball2 {
position: absolute;
left: 225px;
top: 460px;
width: 42px;
height: 40px;
display: block;
background: url(../../Web4/Images/ball2.png) no-repeat;
background-position: top left;
z-index: 1001;
}