2015-02-10 79 views
0

我已經創建了一個浮動在右頁的按鈕。jquery動畫右頁寬度問題

在選擇時,我已經讓div.enquiry-box在左邊有動畫。選擇關閉將向右移動。

我已經做出了相應的jfiddle - http://jsfiddle.net/6j0mptsp/

我有問題,是當DIV是按鈕的右邊(等待BTN-make的點擊,使其滑入到位)。 div確實位於右側,但頁面寬度增加,可以滾動查看坐在那裏的查詢框。

解決此問題的最佳方法是什麼? HTML

<div class="slide-box"> 
    <a href="#" class="btn-make"> 
     <img src="images/btn-side-newsletter.png" alt="Newsletter signup" /></a> 
    <div class="enquiry-box show"> 
     <h2>Receive Newsletter</h2> 
     <p>Enter your email address below to receive the Wesport Newsletter</p> 
     <div class="row"> 
      <input id="side-email" name="side-email" class="side-email" /> 
     </div> 
     <div class="row"> 
      <a href="#"><img src="images/btn-side-send.png" alt="send" /></a> 
      <a class="slide-close" href="#"><img src="images/btn-flyout-close.png" alt="close" /></a> 
     </div> 
    </div> 
</div> 

jQuery的

$(document).ready(function() { 
     $(".btn-make").click(function(event) { 
      event.preventDefault(); 
      if ($(".enquiry-box").hasClass('show')) { 
       $(".enquiry-box").animate({ 
        right: "+39" 
       }, 700, function() { 
        // Animation complete. 
       }); 
      } 
      $(".enquiry-box").removeClass('show') 
     }); 
     $(".slide-close").click(function(event) { 
      event.preventDefault(); 

       $(".enquiry-box").animate({ 
       right: "-252" 
       }, 700, function() { 
        // Animation complete. 
       }); 

      $(".enquiry-box").addClass('show') 
     }); 

    }); 

回答

1

我是從CSS

body 
{ 
overflow-x: hidden; 
} 

D'缺少哦