Border Adds: Hide and Show slide off to the left side of their container.
Hello. I'm practising JQuery and layouts and I'm confused as to why my border adds are sliding off to the left edge of their containers(divs) when I hide and show them.
Here is what I have. Hope you can help!
- <div id="wrapper"></div>
- <div id="adds_left"><img src=""/></div>
- <div id="adds_right"><img src=""/></div>
- <div id="adds_bottom"><img src=""/></div>
-
- <script>
-
- var adds = ["#adds_right img:first", "#adds_left img:first", "#adds_bottom img:first"]
- var urls = [
- "http://admin.csrwire.com/system/profile_logos/12774/original/wmt_logo_2.JPG",
- "http://myfrugaladventures.com/wp-content/uploads/2010/07/target_logo.gif",
- "https://cantire.taleo.net/careersection/theme/101/1334777976000/en/theme/images/CT_HorzW_Std_RGB.PNG"];
-
- var urls_index = 0;
- var last_urls_index = 0;
-
- adds.every(function (element, index, array)
- {
- $(element).attr("src", urls[urls_index++]);
- return true;
- });
-
- window.setInterval(RotateAdds, 5000);
-
- function RotateAdds()
- {
- adds.every(function (element, index, array)
- {
- $(element).hide("fast",
- function ()
- {
- $(element).attr("src", urls[urls_index++]);
- if (urls_index >= urls.length) urls_index = 0;
- });
-
- $(element).show("fast");
- return true;
- });
-
- last_urls_index = urls_index
- while (urls_index == last_urls_index) urls_index = Math.floor((Math.random() * 2) + 0);
- }
-
- $(document).ready(function ()
- {
-
- $("a").click(function (event)
- {
- event.preventDefault();
- });
-
- $("a").addClass("test");
-
- });
-
- </script>