kpiatak Posted September 17, 2012 Share Posted September 17, 2012 I would like to have the function reset when you click the button a second time, how would you go about doing this? <!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > <title>Slide 8 Messages</title> <link rel="stylesheet" href="css/style.css" /> <script src="http://code.jquery.com/jquery-latest.js"></script><style>.bus {position: relative;content: url('assets/school-bus.png');left: -700px;top: 450px;}.phonefade {content: url('assets/school-bus-phone.png');position: absolute;top: 270px;left: 1250px;width: 427px;height: 641px;z-index: 1;display: none;}#messages {width: 1920px;height: 930px;background: url('assets/split-bg.png');}#phone {position: absolute;top: 270px;left: 1250px;width: 427px;height: 641px;background: url('assets/phone_noMessage.png');z-index: 0;}.textMe {position: absolute;top: 350px;left: 320px;width: 300px;height: 80px;background: url('assets/textme.png');}.text h1 {color: white;font-size: 30pt;font-family: helvetica, arial;display: block;position: absolute;top: 230px;left: 220px;}</style></head><body><div id = "navBar"> <div id = "navBarTabs"><a href="iris_thermostat.html">Thermostat</a></div> <div id = "navBarTabs"><a href="iris_lock.html">Lock</a></div> <div id = "navBarTabs"><a href="iris_camera.html">Camera</a></div> <div id = "navBarTabs"><a href="iris_smartplug.html">Smart Plug</a></div> <div id = "navBarTabs"><a href="iris_alarm.html">Alarm</a></div> <div id = "navBarTabs"><a href="iris_modes.html">Modes</a></div> <div id = "navBarTabs"><a href="iris_magicrules.html">Magic Rules</a></div> <div id = "navBarTabs"><a href="iris_messages.html">Messages</a></div> <div id = "navBarTabs"><a href="iris_petdoor.html">Pet Door</a></div> <div id = "navBarTabs"><a href="iris_elderlycare.html">Elderly Care</a></div></div><div id ="demoArea"> <div id="messages"> <div class="text"><h1>When my child's key fob enters house</h1></div> <button class="textMe"></button> <div class="bus"></div> <div class="phonefade"></div> <div id="phone"></div> </div></div><script> $("button.textMe").click(function() { $("div.bus").animate ({"left": "+100px"}, (1500)); $("div.phonefade").delay(1500).fadeIn(500); });</script></body></html> Link to comment Share on other sites More sharing options...
dsonesuk Posted September 17, 2012 Share Posted September 17, 2012 Before the animation is run, set the default left position using css() Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now