Wie schiebe ich ein Bild nach links, wenn ich auf dem Bild schwebe, und nach 1 Sekunde wird das Bild wieder nach rechts verschoben?

In diesem Projekt habe ich eine animation.js-Datei geschrieben, mit der ein neues Bild nach links und rechts verschoben werden kann, wenn ich über ein bestimmtes Bild schwebe. Meine Funktion lässt das neue Bild nach links gleiten, aber wenn das Bild wieder nach rechts verschoben werden soll, muss ich den Cursor vom Bild wegbewegen. Ich möchte jedoch, dass das Bild nach 1 Sekunde des Bilds nach rechts verschoben wird, wenn es über dem Bild schwebt. Wie mache ich das?Wie schiebe ich ein Bild nach links, wenn ich auf dem Bild schwebe, und nach 1 Sekunde wird das Bild wieder nach rechts verschoben?

Dies ist, was zur Zeit mein Code funktioniert auf eine Webseite (diese Verbindungen sind zufällige Beispiele aus dem Internet gefunden): http://static.buildinternet.com/live-tutorials/interactive-picture/index.html,

Das ist genau das, was ich meinen Code (das ist meine Aufgabe) zu tun: https://www.youtube.com/watch?v=cAMjrGbmlJg

Hier ist meine animation.js Datei:

$(document).ready(function() { 

    $('.listing_address').hover(function(){ 
     if ($(this).parent().is('.open')) { 

      $(this).closest('.listing').find('.glass').fadeOut(500); 
      $(this).closest('.listing').find('.house').animate({'left' : '25px'}); 
      $(this).closest('.listing').removeClass('open'); 

     }else{ 

      $(this).closest('.listing').find('.glass').fadeIn(500); 
      $(this).closest('.listing').find('.house').animate({'left' : '10px'}); 
      $(this).closest('.listing').addClass('open'); 

     } 

    }); 


});

Hier meine listing.css Datei ist:

@charset "UTF-8"; 

body {font-family: Helvetica, Arial, sans-serif; } 
p { margin: 0px; } 
a { color: #bf572c; } 
a:hover { color: #000; } 

.house_images { 
    float:left; 
    } 

.listing_container { 
    margin: 20px 0px 0px 20px; 
    padding: 0px 0px 5px 0px; 
    width: 700px; 
    background: url(../images/corkboard_tile.jpg) 0px 0px; 
} 

.listing { 
    margin: 0px 15px 35px 15px; 
    padding: 35px 15px 15px 70px; 
    position: relative; 
    background: #fff url(../images/note_top.jpg) no-repeat 0px 0px; 
} 

.listing_address { margin: 0px; padding: 0px 0px 5px 0px; display: inline-block; cursor: help; font-weight: bold; color: #1f4f71; } 

.listing_detail_container { height: 0px; overflow: hidden; padding: 0px; color: #bf572c; } 
.listing_detail { margin: 0px; padding: 0px; color: #bf572c; font-weight: normal; } 

.listing .house { width: 40px; height: 50px; position: absolute; top: 20px; left: 25px; background: url(../images/house.png) 0px 0px; } 
.listing .glass { width: 43px; height: 40px; position: absolute; top: 42px; left: 23px; background: url(../images/magnifier.png) 0px 0px; display: none;} 

.main-navigation ul.nav-menu, 
.main-navigation div.nav-menu > ul { 
     display: inline-block !important; 
     text-align: left; 
     width: 100%; 
} 
.main-navigation ul { 
     margin: 0; 
     text-indent: 0; 
} 
.main-navigation li a, 
.main-navigation li { 
     display: inline-block; 
     text-decoration: none; 
} 
.main-navigation li a { 
     border-bottom: 0; 
     color: #6a6a6a; 
     line-height: 3.6; 
     text-transform: uppercase; 
     white-space: nowrap; 
} 
.main-navigation li a:hover{ 
     color: #000; 
} 
.main-navigation li { 
     margin: 0 30px 0 0; 
     position: relative; 
} 



#hero { 
    height:175px; 
    width:960px; 
} 
#hero div { 
    position:absolute; 
    z-index: 0; 
} 
#hero div.previous { 
    z-index: 1; 
} 
#hero div.current { 
    z-index: 2; 
}

Hier ist meine verkauft.html-Datei:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
     <title>Real Estate Sold</title> 
     <link rel="stylesheet" type="text/css" href="includes/listing.css" /> 
     <script type="text/javascript" src="includes/jquery-1.6.min.js"></script> 
     <script src="includes/"></script> 
     <script type="text/javascript" src="includes/listing.js"></script> 
     <script src = "animation.js"></script> 
    </head> 
    <body> 

<div class="listing_container"> 
     <div class="header"><img src="images/header.jpg" width="750" height="150"></div> 
     <div id="hero"> 
      <div class="current"><img src="images/landscape1.jpg" alt="landscape" width="700" height="175" /></div> 
      <div><img src="images/landscape2.jpg" alt="landscape" width="700" height="175" ></div> 
      <div><img src="images/landscape3.jpg" alt="landscape" width="700" height="175" ></div> 
      <div><img src="images/landscape4.jpg" alt="landscape" width="700" height="175" ></div> 
     </div> 

<nav class="main-navigation" role="navigation"> 
<div> 
<ul id="menu-main-menu" class="nav-menu"> 
<li><a href="index.html">Home</a></li> 
<li><a href="index.html">Regional Info</a></li> 
<li><a href="index.html">Current Listings</a></li> 
<li><a href="#">Sold</a></li> 
<li><a href="index.html">About Us</a></li> 
</ul></div> 
</nav> 

    <div class="listing"> 
       <div class="listing_address" id="martin"> 
        <p>Martin House Complex</p> 
       </div> 
       <div class="listing_detail_container" > 
        <div class="listing_detail" id = "martin_detail"> 
         <ul><li>The Martin House Complex was built in 1905.</li><li> The square footage is 14,978 sq. ft. </li></ul> 
         <p> <a href="images/martin1.jpg" ><img src="images/martin_ext.jpg" alt="martin" /></a></p> 
         </ul> 
        </div> 
       </div> 
       <div class="house"></div><div class="glass"></div> 
      </div> 


      <div class="listing" id="robie"> 
       <div class="listing_address"> 
        <p>Robie House</p> 
       </div> 
       <div class="listing_detail_container"> 
        <div class="listing_detail"> 
         <ul><li>The Robie House was built in 1909.</li><li> The square footage is 13,070 sq. ft. </li></ul> 

         <p><img src="images/robie_ext.jpg"></p> 
        </div> 
       </div> 
       <div class="house"></div><div class="glass"></div> 
      </div> 


      <div class="listing"> 
       <div class="listing_address" id="Taliesin"> 
        <p>Taliesin</p> 
       </div> 
       <div class="listing_detail_container"> 
        <div class="listing_detail"> 
         <ul><li>The Taliesin House was built in 1911.</li><li> The property sits on a 600 acre lot. </li></ul> 

         <p><img src="images/taliesin_ext.jpg"></p> 
        </div> 
       </div> 
       <div class="house"></div><div class="glass"></div> 
      </div> 


      <div class="listing"> 
       <div class="listing_address" id="water"> 
        <p>Falling Water</p> 
       </div> 
       <div class="listing_detail_container"> 
        <div class="listing_detail"> 
         <ul><li>The Falling Water House was built in 1937.</li><li> The property includes the main house, a four-bay carport, servants' quarters, and a guest house. </li></ul> 
         <p><img src="images/water_ext.jpg"></p> 


        </div> 
       </div> 
       <div class="house"></div><div class="glass"></div> 
      </div> 

     </div> 


    </body> 
</html>

Quelle

2016-08-01 user_13439903

'animate' hat eine [Callback-Funktion] (http://api.jquery.com/animate/#basic-usage), die Sie verwenden können, nachdem die Animation erfolgt. Dann kannst du wahrscheinlich etwas hineinlegen wie 'setTimeout (function() {$ (this) .closes ('. Listing'). Find ('. House'). Animate ({'right': '25px'}); }, 1000) ' – Quack

@Quack Wo sollte ich diesen Code platzieren. Ich habe es an einigen Stellen versucht, und sie funktionieren nicht? –

Sie müssen den Callback zu Ihrer Animation hinzufügen (wie im Link) und den Code dort eingeben. – Quack

Mit jQuery animate() Funktion können Sie eine Callback-Funktion angeben, wie oben in den Kommentaren erwähnt, wird diese Funktion ausgeführt werden nach die Animation abgeschlossen ist, wie folgt aus:

$("#foo").animate({ 
    opacity: 1, 
}, 1000, function() { 
    // the callback function 
    alert('Animation complete!'); 
});

UPDATE 1:

Für Ihre ein ssignment, finden Sie diese Zeile im else Abschnitt:

$(this).closest('.listing').find('.house').animate({'left' : '10px'});

Alles was Sie jetzt brauchen, ist eine Rückruffunktion * nach dem Schließen } Ihrer animate() Funktion, wie dies hinzuzufügen:

$(this).closest('.listing').find('.house').animate({'left': '10px'}, function(){ 
    // this is the callback function 
    $(this).closest('.listing').find('.house').delay(1000).animate({'left': '25px'}); 
});

Die Callback-Funktion (die innere animate() Funktion) wird sofort laufen nach der Animation der ersten animate() Funktion endet, deshalb haben wir eine Verzögerung von 01 hinzugefügt Sekunden delay(1000), bevor es so wird es warten 1 Sekunden dann funktioniert es

UPDATE 2

Um die .glass verblassen zu entziffern nach 1 Sekunde dies nur ändern:

$(this).closest('.listing').find('.glass').fadeIn(500);

zu diesem:

$(this).closest('.listing').find('.glass').fadeIn(500).delay(1000).fadeOut(500);

jsFiddle

Quelle

2016-08-01 02:01:00

Danke für deine Hilfe! Mein Lehrer möchte, dass ich nur die .js-Datei verwende, also kann ich nichts anderes bearbeiten. Gibt es eine andere Möglichkeit, dies auf meiner animation.js zu tun? –

so etwas wie dieses https://jsfiddle.net/dgqkn8ka/ –

Das funktioniert! Ich danke dir sehr! Ich habe nur noch eine kurze Frage. Wie kann ich das Bild nach 1 Sekunde wie im Video verschwinden lassen? –

Wie schiebe ich ein Bild nach links, wenn ich auf dem Bild schwebe, und nach 1 Sekunde wird das Bild wieder nach rechts verschoben?

Antwort

Verwandte Themen