Ошибка раздвижной коробки

Question

This - это моя страница. Как вы можете видеть, при наведении кнопки «объявления» переход отображает только часть рекламы. Я хочу, чтобы он показывал весь AD. Вот код, я использую

<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%; 
}