Depot43-Unterlagen - Event mit jQuery

HTML Elemente

            
            



<!doctype html>
<html lang="de">
<head>
	<meta charset=utf-8>
	<title>HTML5 Flex CSS - Event mit jQuery</title>
	<style>
        #rot {
            position:relative;
            width:50px;
            height:50px;
            background-color:  red;
            cursor:pointer;
            animation: myanim-rot 10s infinite;
            animation-play-state: paused;
        }
        #rot.animGo {
            animation-play-state: running;
        }
        button {
            width: 120px;
            height: 20px;
            margin-top:40px;
            color: black;
            cursor:pointer;
        }
        button:active {
            color: red;
        }

        
        /* KeyFrames die Angaben für die Animation *****************************/
       
        @keyframes myanim-rot {
            0% {left:0px;}
            50% {left:300px;}
            100% {left:0px;}
        }
	</style>
</head>
<body>
        <div id="rot"></div>
        <button>Start/Stopp</button>
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
        <script type="text/javascript">
            $(document).ready(function(){
                $('button').click(function() {
                    $('#rot').toggleClass('animGo');
                });
            });
        </script>

</body>
</html>


 

            

Beachte

Eine Klassenzuweisung ist mit jQuery sicher einfach und schnell erstellt.

$(document).ready(function(){
     $('button').click(function() {
          $('#rot').toggleClass('animGo');
     });
});

Es macht aber wenig Sinn, für eine einzelne Aktion die gesamte jQuery-bibliothek zu laden. Wenn jQuery aber ein Bestandteil des Projekts ist, ist dies meist die einfachste Lösung.