Warum wird die jQuery-Animation nur einmal ausgeführt?

Ich kann meine Animation nur einmal fertig stellen, ohne die Seite neu zu laden. Es gibt eine ähnliche Frage zu dem gleichen Problem, aber ich kann es nicht scheinen, es auf mouseenter wieder zu entfachen. Danke im Voraus.Warum wird die jQuery-Animation nur einmal ausgeführt?

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="UTF-8"> 
    <title>My Practice Page</title> 

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


    <style> 
     #root { 
      height: 100px; 
      width: 100px; 
      background-color: darkblue; 
      position: absolute; 
      margin: auto; 
      top: 0; 
      left: 0; 
      bottom: 0; 
      right: 0; 
     } 
    </style> 
</head> 

<body> 
    <div id="root"> 

    </div> 
    <script> 
     $(document).ready(function() { 

      $('#root').mouseenter(function() { 
       $(this).animate({ 
        'right': '200' 
       }); 
      }); 
      $('#root').mouseleave(function() { 
       $(this).animate({ 
        'left': '200' 
       }); 
      }); 
     }); 
    </script> 

</body> 

</html>

Quelle

2017-06-29 Booyah

Da der Wert von right und left nach Abschluss des Zyklus aus dem Element entfernt werden muss. Dies kann leicht mit CSS-Übergängen erreicht werden – karthick

Können Sie erklären, was Sie erreichen möchten? Versuchen Sie, es gleiten oder wachsen zu lassen? – Soviut

Sie Animieren zwei verschiedene Eigenschaften, right und left. Das sind nicht die Richtungen, in die sie reisen, sie stellen dar, wie weit der Abstand von der linken und rechten Seite ihres übergeordneten Containers entfernt ist.

Wie Sie es jetzt haben, wenden Sie diese beiden Eigenschaften an und entfernen sie nie. Wenn Sie versuchen, das Element wie eine Schublade aus dem Weg zu schieben, sollten Sie nur die left-Eigenschaft animieren, indem Sie 200px unter mouseenter hinzufügen und left zurück auf 0px auf mouseleave setzen. Wenn Sie versuchen, das Element wachsen zu lassen, sollten Sie stattdessen width oder right animieren, aber folgen Sie dem gleichen Zurücksetzungsverfahren unter mouseleave.

JEDOCH! ein einfacher Weg, um zu erreichen, was Sie wollen, um es einfach mit reinen CSS-Übergängen zu tun. Diese werden flüssiger animieren, sind oft GPU-beschleunigt, haben unterschiedliche Beschleunigungskurven und werden auch dann korrekt zurückgesetzt, wenn die Maus den Mauszeiger verlässt, bevor die Maus die Animation beendet hat.

.target { 
 
    padding: 10px; 
 
    background: cornflowerblue; 
 
    width: 50%; 
 
    
 
    /* the transition does all the work */ 
 
    transition: transform 500ms ease-in-out; 
 
} 
 

 
.target:hover { 
 
    /* use a transform for easier position movement */ 
 
    transform: translateX(200px); 
 
}

<div class="target">Hover over me</div>

Quelle

2017-06-29 21:38:35 Soviut

Es scheint, dem Cursor zu folgen, ist das wirklich was er OP möchte? – 11thdimension

Es folgt nicht dem Cursor. Das OP möchte, dass es bei MouseOver zur Seite rutscht und dann wieder zurückgleitet, wenn sie es verlassen. – Soviut

Versuchen Sie, den Cursor in der ersten Hälfte des Bildschirms in derselben Zeile zu bewegen, wobei er dem Cursor folgt. – 11thdimension

Da left und right Positionierung außer Kraft setzen nicht immer gegenseitig. Sie benötigen einen entfernen, bevor der andere beobachtet werden kann:

$('#root').mouseenter(function() { 
    $(this).css("left", ""); 
    $(this).animate({ 
     'right': '200' 
    }); 
}); 
$('#root').mouseleave(function() { 
    $(this).css("right", ""); 
    $(this).animate({ 
     'left': '200' 
    }); 
});

Oder wenn Sie einfach in ihre ursprüngliche Position zurückkehren möchten, können Sie einfach den right Wert wieder zurück auf 0:

$('#root').mouseenter(function() { 
    $(this).animate({ 
     'right': '200' 
    }); 
}); 
$('#root').mouseleave(function() { 
    $(this).animate({ 
     'right': '0' 
    }); 
});

Quelle

2017-06-29 21:41:39 Marquizzo

Verwenden Sie statt 'left': '200''right': '0'.

<!DOCTYPE html> 
 
    <html lang="en"> 
 

 
    <head> 
 
     <meta charset="UTF-8"> 
 
     <title>My Practice Page</title> 
 

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

 
<style> 
 
#root { 
 
    height: 100px; 
 
    width: 100px; 
 
    background-color: darkblue; 
 
    position: absolute; 
 
    margin: auto; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
} 
 
</style> 
 
    </head> 
 

 
    <body> 
 
     <div id="root"> 
 

 
     </div> 
 
<script> 
 
$(document).ready(function() { 
 
    $('#root').mouseenter(function() { 
 
    \t \t $('#root').animate({ 
 
      'right': '200' 
 
     }); 
 
    }); 
 
    $('#root').mouseleave(function() { 
 
     $('#root').animate({ 
 
      'right': '0' 
 
     }); 
 
    }); 
 
}); 
 
</script> 
 

 
</body> 
 

 
</html>

Dies funktioniert, weil man zwei verschiedene Dinge Animieren werden.

Quelle

2017-06-29 21:45:56 DecstarG

Das habe ich gesucht! Zu einfach. Vielen Dank! – Booyah

Warum wird die jQuery-Animation nur einmal ausgeführt?

Antwort

Verwandte Themen