By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,972 Members | 901 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,972 IT Pros & Developers. It's quick & easy.

Jquery Issue

P: 82
I'm having some trouble with the site I'm developing.

Here is the link: http://www.r2maker.com/r2maker/index2.html

As you can see the fourth image is really buggy and I'm unsure of how to fix it.

Here is the code for that one area only.

Here is my css

Expand|Select|Wrap|Line Numbers
  1. #content{
  2.     width: 922px;
  3.     height: 372px;
  4.     overflow:hidden;
  5.  
  6. }
  7.  
  8.  
  9. #pic1{    
  10.     /* width of space */
  11.     width: 130px;
  12.     height: 370px;
  13.     overflow:hidden;
  14.     float:left;
  15.     border-style:solid;
  16.     border-color: #3e4b5a;
  17.     border-top-width:1px;
  18.     border-right-width:1px;
  19.     border-bottom-width:1px;
  20.     border-left-width:1px;
  21.  
  22. }
  23.  
  24. #pic2{
  25.     /* width of space */
  26.     width: 130px;
  27.     height: 370px;
  28.     overflow:hidden;
  29.     float:left;
  30.     border-style:solid;
  31.     border-color: #3e4b5a;
  32.     border-top-width:1px;
  33.     border-right-width:1px;
  34.     border-bottom-width:1px;
  35.     border-left-width:1px;
  36. }
  37. #pic3
  38. {
  39.     width: 508px;
  40.     height: 370px;
  41.     overflow:hidden;
  42.     float:left;
  43.     border-style:solid;
  44.     border-color: #3e4b5a;
  45.     border-top-width:1px;
  46.     border-right-width:1px;
  47.     border-bottom-width:1px;
  48.     border-left-width:1px;
  49. }
  50. #pic4
  51. {
  52.     width: 130px;
  53.     height: 370px;
  54.     overflow:visible;
  55.     float: right;
  56.     border-style:solid;
  57.     border-color: #3e4b5a;
  58.     border-top-width:1px;
  59.     border-right-width:1px;
  60.     border-bottom-width:1px;
  61.     border-left-width:1px;
  62. }
  63. #picSp1
  64. {
  65.     height:370px;
  66.     overflow:hidden;
  67.     width:5px;
  68.     float:left;
  69.  
  70. }
  71. #picSp2
  72. {
  73.     overflow:hidden;
  74.     height:370px;
  75.     width:5px;
  76.     float:left;
  77. }
  78. #picSp3
  79. {
  80.     overflow: hidden;
  81.     height:370px;
  82.     width:5px;
  83.     float:left;
  84. }
  85. #picSp4
  86. {
  87.     overflow: hidden;
  88.     height:370px;
  89.     width:1px;
  90.     float:left;
  91. }
  92. #menu1{
  93.     /* This is the container for the thumbnails */
  94.     height:45px;
  95.     float: none;
  96.     width: 400px;
  97. }
  98.  
  99.  
and my index.html

Expand|Select|Wrap|Line Numbers
  1.  <div id="content">
  2.     <script type="text/javascript">
  3.     function upSize(){
  4.  
  5.     $("#pic1").animate(      
  6.            {"width": "508px"},          
  7.                  {duration: 500, queue: false}); 
  8.  
  9.     $("#pic2").animate(      
  10.            {"width": "130px"},          
  11.                 {duration: 500, queue: false});
  12.  
  13.      $("#pic3").animate(      
  14.            {"width": "130px"},          
  15.                  {duration: 500, queue: false});
  16.      $("#pic4").animate(      
  17.            {"width": "130px"},          
  18.                  {duration: 500, queue: false});
  19.     }
  20.     function downSize(){
  21.     $("#pic1").animate(      
  22.            {"width": "130px"},          
  23.                  {duration: 500,queue: false});
  24.  
  25.     $("#pic2").animate(      
  26.            {"width": "508px"},          
  27.                 {duration: 500,queue: false});
  28.  
  29.     $("#pic3").animate(      
  30.            {"width": "130px"},          
  31.                 {duration: 500,queue: false});
  32.      $("#pic4").animate(      
  33.            {"width": "130px"},          
  34.                  {duration: 500, queue: false});
  35.     }
  36.     function ThirdSize(){
  37.     $("#pic1").animate(      
  38.            {"width": "130px"},          
  39.                {duration: 500, queue: false});
  40.  
  41.     $("#pic2").animate(      
  42.            {"width": "130px"},          
  43.                 {duration: 500,queue: false});
  44.  
  45.  
  46.     $("#pic3").animate(      
  47.            {"width": "508px"},          
  48.                {duration: 500,queue: false});
  49.  
  50.      $("#pic4").animate(      
  51.            {"width": "130px"},          
  52.                  {duration: 500, queue: false});
  53.     }
  54.  
  55.     function FourthSize(){
  56.  
  57.     $("#pic1").animate(      
  58.            {"width": "130px"},          
  59.                {duration: 500, queue: false});
  60.  
  61.     $("#pic2").animate(      
  62.            {"width": "130px"},          
  63.                 {duration: 500,queue: false});
  64.  
  65.  
  66.     $("#pic3").animate(      
  67.            {"width": "130px"},          
  68.                {duration: 500,queue: false});
  69.  
  70.      $("#pic4").animate(      
  71.            {"width": "508px"},          
  72.                  {duration: 500, specialEasing:{width: "linear"}, queue: false});
  73.  
  74.     }
  75.     </script>
  76.  
  77.  
  78.     <div id="pic1">
  79.         <img src="img/c_left.jpg" height="370" width="508" alt=""  onmouseover="upSize();"  />
  80.         <!-- <img src="img/pic1.jpg" width="720" height="400" alt="" /> -->
  81.      </div>
  82.  
  83.     <div id="picSp1">
  84.     </div>
  85.  
  86.  
  87.     <div id="pic2">
  88.         <img src="img/c_right.jpg" height="370" width="508" alt=""  onmouseover="downSize();"  />
  89.         <!--<img src="img/pic2.jpg" width="720" height="400" alt="" /> -->
  90.     </div>
  91.  
  92.     <div id="picSp2">    
  93.     </div>
  94.  
  95.     <div id="pic3">
  96.     <img src="img/c_center.jpg" height="370" width="508" alt=""  onmouseover="ThirdSize();" />
  97.     <!--<img src="img/pic2.jpg" width="720" height="400" alt="" /> -->
  98.     </div>
  99.  
  100.     <div id="picSp3">
  101.     </div>
  102.  
  103.     <div id="pic4">
  104.     <img src="img/c_4.jpg" height="370" width="508" alt=""  onmouseover="FourthSize();" />
  105.     </div>
  106.     <div id="picSp4"></div>
  107.     </div>
  108.  
Sep 3 '13 #1
Share this Question
Share on Google+
3 Replies


Dormilich
Expert Mod 5K+
P: 8,639
I donít see anything buggy with that image (the dome one).
Sep 3 '13 #2

P: 82
When you hover over the first image on the left and switch back and forth between it and the last image the divs bounce a little and I see that dome picture cut in and out . I'm testing on google chrome and iphone with iOS 6
Sep 4 '13 #3

P: 82
Now I have removed the bounce of the div.. However that fourth image is still blinking when switching back between it and the first image.
Sep 4 '13 #4

Post your reply

Sign in to post your reply or Sign up for a free account.