Question

我正在创建一个基于PHP的网站。在页面上有滚动div中包含的几个缩略图。此处的每一侧都有用于向右/向左滚动缩略图的按钮。单击缩略图会显示先前隐藏的div，其中包含每个缩略图的更多详细信息。

我的问题是，在选择关闭弹出窗口的选项时，jquery动画变得非常颤抖。作为Jquery的新手，我有点失落。我把它固定到以下函数执行时：

  function pilotclosemain(keys) {
  $('#bubbletwo' + keys).hide();
  $('#container-bubble' + keys).hide();
  $('#container-searchxx').hide();
  };

隐藏的最后两个div只是背景，并且对此进行评论并不会影响性能，所以只有当'#bubbletwo'+键被隐藏时才会这样。我不明白的是，虽然这些div包含了大量的文本数据，但只有在弹出窗口被隐藏时才会出现抖动，而它仍然可见。

这是关闭弹出窗口的功能（html在下面）。

这是我用来动画滑动的thumnails的代码

   function slider(direction) {

       if (direction == 1) { 
           $(photowrapper).animate({marginLeft : '-=<?php echo $visibleWidth ?>px'}, 3000);

           } 
       else if (direction == 0) { 

            $(photowrapper).animate({marginLeft : '+=<?php echo $visibleWidth ?>px'}, 3000);

            } 
       }

以下HTML是'弹出'div及其内容

<div class="bubble" id="bubbletwo<?php echo $row_pilots3['key']; ?>" style="display: none; z-index: 30; left: -50px;">
  <img src="images/transparent.png" width="400" height="620" alt=""/ onClick="pilotclosemain('<?php echo $row_pilots3['key']; ?>')"> 
  <img src="images/backgrounds/pilot-window-background-nopic.png" width="1139" height="620" alt=""/>
  <?php }?>

  <div class="bubble-search-backing" id="bubble-search-backing<?php echo $row_pilots3['key']; ?>" style="display: inherit; ">
  </div>

  <div class="close-keyboard" id="close-bubble-main<?php echo $row_pilots3['key']; ?>" style="display: none; width: 128px; height: 99px;" onClick="pilotclosemain('<?php echo $row_pilots3['key']; ?>')">  
  </div>

  <div class="close-keyboard" id="close-bubble-search<?php echo $row_pilots3['key']; ?>" style="display: inherit; width: 128px; height: 99px; " onClick="pilotclosesearch('<?php echo $row_pilots3['key']; ?>')">
  </div>

    <div class="bubble-top-details" id="bubble-top-details">
      <div class="bubble-name"> <?php echo $row_pilots3['surname']; ?> <?php echo $row_pilots3['firstname']; ?></div>
      <div class="bubble-rank"> <?php echo $row_pilots3['rank']; ?> <?php echo $row_pilots3['rankno']; ?> </div>

      <div class="bubble-squadron"> <?php echo $row_pilots3['squadron']; ?> </div>
      <div class="bubble-country"> <?php echo $row_pilots3['country']; ?> </div>        
    </div>

    <div class="bubble-bio" id="bubble-bio<?php echo $row_pilots3['key']; ?>"> <?php echo $row_pilots3['bio']; ?> </div>

    <div class="bubble-bio-overlay" id="bubble-bio-overlay<?php echo $row_pilots3['key']; ?>">
      <img src="images/backgrounds/bubble-text-overlay.png" width="981" height="79" alt=""/>
    </div>

    <div class="bubble-bio-overlay-top" id="bubble-bio-overlay-top<?php echo $row_pilots3['key']; ?>">
      <img src="images/backgrounds/bubble-text-overlay-top.png" width="985" height="79" alt=""/>
    </div>

    <?php if ( $row_pilots3['image'] != 'generic.jpg'  ){
?>
    <div class="bubble-photo-portrait" style="margin-top: 10px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px;">
      <img src="images/photos/<?php echo $row_pilots3['image']; ?>" width="292" height="448" alt=""/>
    </div>
    <div class="bubble-photo-portrait">
      <img src="images/bubble-photo-portrait.png" width="320" height="468" alt=""/> 
    </div>
    <?php }  ?>

  </div>

Jquery动画div juddery

0 个答案: