Wie verschiebe ich ein Objekt in HTML?

Ich möchte den Roller von rechts bewegenWie verschiebe ich ein Objekt in HTML?

Hier nach links Sie den Roller sehen. Ich will, wenn die Seite fertig ist, will ich, dass sich der Roller in die Nähe des Stuhls bewegt, auf dem die Dame sitzt.

Hier ist mein Code: -

.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>

Quelle

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

Sie können ein animation in CSS3 hinzufügen, die das Rollerelement neben dem Stuhl bewegen.

Mit Jquery hinzufügen in fügen Sie Ihre animierte class.

Beispiel

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

Quelle

2017-01-30 13:27:06 Alexis

das ist ein gutes Beispiel –

versuchen diesen Code

<!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>

Ihre Richtungswechsel wie pro Ihre Anforderung

Quelle

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"}); 
});

Mehr Details hier: http://api.jquery.com/animate/

Und hier: Difference between $(window).load() and $(document).ready() functions

Quelle

2017-01-30 13:32:24 filemono

Hier ist ein funktionierendes Beispiel, das kümmert sich um die Container-divs, es sind Kinder durch Vererbung, die etwas HTML ändern, und der "Roller" mit seinen persönlichen CSS-Einstellungen, der eine ID darauf setzt.

Nach 2 Sekunden habe ich den Schwimmer geändert.

Werfen Sie einen Blick:

// 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>

Quelle

2017-01-30 13:35:27 RPichioli

Wie verschiebe ich ein Objekt in HTML?

Antwort

Verwandte Themen