htmlでオブジェクトを移動するには？

私はあなたがスクーターを見ることができます。ここhtmlでオブジェクトを移動するには？

を右から左にスクーターを移動したいです。私はページがローディングを終えるときにしたい。私はスクーターがその椅子の近くに移動するのは女性が座って欲しい。ここで

が私のコードです： -

.inner-girl-icon { 
    float: right; 
    margin: 5px 262px; 
    max-width: 75px; 
    width: 100%; 
}

<div class="col-md-8 col-sm-8 col-xs-12"> 
    <div class="girl-icon"> 
    <span class="inner-girl-salon"><img src="{{ asset('images/demo/salon-icon.png') }}" class="img-responsive"></span> 
    </div> 
    <div class="girl-icon"> 
    <span class="inner-girl-icon"><img src="{{ asset('images/demo/demo1.jpg') }}" class="img-responsive"></span> 
    </div> 
</div>

出典

2017-01-30 kunal

https://www.google.com/search?q=animate+move+one+div+closer+to+another – mplungjan

ます。http：

を見てみましょう//stackoverflow.com/a/41563719/4206079 – Banzay

animationをに追加できます。CSS3スクーターエレメントを椅子の横に移動します。

Jqueryready eventあなたのアニメーションを追加classここ

例

$(document).ready(function(){ 
 
    $(".scooter").addClass("animon"); 
 
});

.container{ 
 
    position:relative; 
 
} 
 

 
.chair{ 
 
    position:absolute; 
 
    left:50px; 
 
    background-color:blue; 
 
    width:40px; 
 
    height:40px; 
 
} 
 

 
.scooter{ 
 
    position:absolute; 
 
    left:400px; 
 
    background-color:green; 
 
    width:40px; 
 
    height:40px; 
 
} 
 

 
.animon{ 
 
    animation:animscooter 2s ease-out forwards; 
 
} 
 

 
@keyframes animscooter{ 
 
    0%{ 
 
    left:400px; 
 
    } 
 
    100%{ 
 
    left:90px; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="chair"> 
 
    </div> 
 
    <div class="scooter"> 
 
    </div> 
 
</div>

出典

2017-01-30 13:27:06 Alexis

これは良い例です –

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
div { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: yellow; 
 
    position: relative; 
 
    -webkit-animation: myfirst 5s infinite; /* Safari 4.0 - 8.0 */ 
 
    -webkit-animation-direction: alternate; /* Safari 4.0 - 8.0 */ 
 
    animation: myfirst 5s 3s; 
 
    animation-direction: alternate; 
 
} 
 

 
/* Safari 4.0 - 8.0 */ 
 
@-webkit-keyframes myfirst { 
 
    25% {background: yellow; left: 200px; top: 0px;} 
 
} 
 

 
@keyframes myfirst { 
 
    25% {background: yellow; left: 200px; top: 0px;} 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 
<div></div> 
 

 

 
</body> 
 
</html>

このコードを試してみてください、あなたの要件ごとに、あなたの方向を変える

出典

2017-01-30 13:26:13

$(window).on('load', function() { 
    // executes when page is fully loaded, including all frames, objects and images 
    $("#scooter").animate({left: "100px"}); 
});

詳細： http://api.jquery.com/animate/

そして、ここで： Difference between $(window).load() and $(document).ready() functions

出典

2017-01-30 13:32:24 filemono

これは実際の例です。これはコンテナのdivを気にしています。継承によって子供たちがHTMLを変更し、 "scooter"を個人的なCSS設定でIDに設定しています。

2秒後、私はフロートの変更を行った。

// Wait for DOM load 
 
$(document).ready(function() { 
 
    // The element goes left 2 seconds later for example 
 
    setTimeout(function() { 
 
    // Changing the CSS attribute 
 
    $('#scooter').css('float', 'left'); 
 
    // Console message 
 
    console.log('changed!'); 
 
    }, 2000); 
 
});

/* Instead of margin in girl-icon i'm setting default width to both containers */ 
 
.girl-icon { 
 
    width: 100px; 
 
    float: left; 
 
} 
 

 
/* Scooter default CSS */ 
 
#scooter { 
 
    float: right; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-md-8 col-sm-8 col-xs-12"> 
 
<div class="girl-icon"> 
 
    <!-- Converted to div --> 
 
    <div class="inner-girl-salon"> 
 
    <!-- Represents the 1st image --> 
 
    <div id="person">person</div> 
 
    </div> 
 
    <!-- Clear both --> 
 
    <div style="clear:both"></div> 
 
</div> 
 
<div class="girl-icon"> 
 
    <!-- Converted to div --> 
 
    <div class="inner-girl-icon"> 
 
    <!-- Represents the 2nd image --> 
 
    <div id="scooter">scooter</div> 
 
    </div> 
 
    <!-- Clear both --> 
 
    <div style="clear:both"></div> 
 
</div> 
 

 
<!-- Clear both --> 
 
<div style="clear:both"></div>

出典

2017-01-30 13:35:27 RPichioli

htmlでオブジェクトを移動するには？

答えて

関連する問題