滑動框錯誤

Question

This是我的網頁。如您所見，當您懸停「廣告」按鈕時，轉換隻會顯示部分廣告。我想讓它顯示整個廣告。下面是我使用

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(document).ready(function() {$(".wcfbslide").hover(function() {$(this).stop().animate({right: "-5"}, "slow");}, function() {$(this).stop().animate({right: "-300"}, "medium");}, 500);}); 
</script> 
<style type="text/css"> 
    .wcfbslide{ 
     background: url("http://danithemes.fanscity.eu/shugar/wp-content/uploads/2014/11/ads1.png") no-repeat scroll left center transparent !important; 
     display: block; 
     float: right; 
     height: 110px; 
     padding:0 5px 0 46px; 
     width: 295px; 
     z-index: 99999; 
     position:fixed; 
     right:-300px; 
     top:30%; 
    } 

    .wcfbslide div { 
     border:none; 
     position:relative; 
     display:block; 
    } 

    .wc-gplusfollow { 
     position: relative; 
     padding: 10px;  
     background:#ffffff;  
     border: 1px solid #ccc; 
     box-shadow: inset 0 0 30px rgba(0,0,0,0.1), 1px 1px 3px rgba(0,0,0,0.2); 
    } 
</style> 
    <div class="wcfbslide"> 
     <div class="wc-gplusfollow"> 
      <script src="http://fanscity.eu/ads/728x90.js"></script> 
     </div> 
    </div> 

Answer 1

你可以增加「正確」的屬性值，現在懸停不言而喻右邊的代碼：-5px，儘量使其正確440px。

$(this).stop().animate({right: "440px"}, "slow"); 

Answer 2

記住，橫幅是728個像素長，因此 「.wcfbslide」 應當具有至少728px的寬度（寬度：728px;）。它最初是隱藏的：將正確的屬性設置爲-728px（右：-728px;）。

然後，您需要將您的動畫更改爲：

$(document).ready(function() {$(".wcfbslide").hover(function() {$(this).stop().animate({right: "0"}, "slow");}, function() {$(this).stop().animate({right: "-728"}, "medium");}, 500);}); 

Answer 3

你的寬度的和利潤需要調整的一點點。雖然JSFiddle不會顯示圖像。

JSFiddle

的Javascript：

$(".wcfbslide").hover(function() { 
    $(this).stop().animate({ 
     right: "-5" 
    }, "slow"); 
}, function() { 
    $(this).stop().animate({ 
     right: "-735" 
    }, "medium"); 
}, 500); 

CSS：

.wcfbslide { 
    background: url("http://danithemes.fanscity.eu/shugar/wp-content/uploads/2014/11/ads1.png") no-repeat scroll left center transparent !important; 
    display: block; 
    float: right; 
    height: 110px; 
    padding:0 5px 0 46px; 
    width: 728px; 
    z-index: 99999; 
    position:fixed; 
    right:-735px; 
    top:30%; 
}