隐藏的幻灯片不会扩展隐藏容器内的全宽

Question

所以这是一个棘手的问题。我有一个div显示/隐藏点击，在该div是一个隐藏的div有幻灯片，一切工作正常，等等，除了图像坚持宽度的父元素，而不是全宽容器。我怎样才能让它忽略我认为正在发生的父元素，并使它适合容器的宽度。我尝试过背景元素和不同的元素，但无法获得任何工作。下面的相关代码。

var move = -15; 

var zoom = 1.2; 

$('.item').hover(function() { 

    width = $('.item').width() * zoom; 
    height = $('.item').height() * zoom; 

    $(this).find('img').stop(false, true).animate({ 
     'width': width, 
     'height': height, 
     'top': move, 
     'left': move 
    }, { 
     duration: 200 
    }); 

    $(this).find('div.caption').stop(false, true).fadeIn(200); 
}, 

function() { 

    $(this).find('img').stop(false, true).animate({ 
     'width': $('.item').width(), 
     'height': $('.item').height(), 
     'top': '0', 
     'left': '0' 
    }, { 
     duration: 100 
    }); 

    $(this).find('div.caption').stop(false, true).fadeOut(200); 
}); 

}); 

#slider { 
    height: 685px; 
    width: 1024px; 
} 

    height: 685px; 
    width: 1024px; 
    margin: 0; 
    position: relative; 
} 

.slider-container { 
    height: 685px; 
    width: 1024px; 
    overflow: hidden; 
} 

.advent { 
    float: left; 
    display: block; 
    height: 275px; 
    width: 340px; 
    background: #222; 
} 

.natural { 
    background: url(images/natural.jpg); 
    } 
.toggleBtn { 
    display: block; 
    margin: auto; 
} 

.toggleBtn p { 
    font: normal 3em Futura, sans-serif; 
    color: #029b9d; 
    cursor: pointer; 
    line-height: 8; 
    padding: 15px; 
    text-align: center; 
} 

.toggleBtn span { 
    font: normal 3em Futura, sans-serif; 
    color: #222; 
    line-height: 2.5; 
    cursor: pointer; 
    margin-bottom: 15px; 
    float: right; 
} 

.toggleBtn span:hover { 
    color: #029b9d; 
} 

.below { 
    background: url(images/bg.jpg); 
    width: 1024px; 
    margin: auto; 
    position: absolute; 
    top: 8em; 
    overflow: hidden; 
    z-index: 9999; 
} 

.info { 
    width: 100px; 
    height: 100px; 
    font: normal 2em Futura, sans-serif; 
    background: url(images/info-btn.png)no-repeat; 
    position: absolute; 
    left: 3.5em; 
    top: 2em; 
    cursor: pointer; 
} 



<div class="item advent natural"> 
    <div class="caption toggleBtn"><div class="info"></div><p>Natural Jams</p></div> 
    <div class="below"> 
        <div id="slider"> 
       <img style="background:url(images/n1.jpg)"/> 
      </div> </div> 
    </div> 

Answer 1

我已经改变了剧本一点点。试着让我知道

<script> 
    var move = -15; 

     var zoom = 1.2; 
$(document).ready(function(){ 
     $('.item').hover(function() { 
       $(this).width('340px'); 
       width = $(this).width() * zoom; 
       height = $(this).height() * zoom; 

       $(this).find('img').stop(false,true).animate({'width':width, 'height':height, 'top':move, 'left':move}, {duration:200}); 


       $(this).find('div.caption').stop(false,true).fadeIn(200); 
     }, 
     function() { 
       $(this).width('1338px'); 
       $(this).find('img').stop(false,true).animate({'width':$('.item').width(), 'height':$('.item').height(), 'top':'0', 'left':'0'}, {duration:100});   


       $(this).find('div.caption').stop(false,true).fadeOut(200); 
     }); 

}); 
</script> 
<style> 
#slider { 
    height: 685px; 
    width: 1024px; 
    margin: 0; 
} 

.slider-container { 
    height: 685px; 
    width: 1024px; 
    overflow: hidden; 
} 

.advent { 
    float: left; 
    display: block; 
    height: 275px; 
    width: 340px; 
    background: #222; 
} 

.natural { 

    } 
.toggleBtn { 
    display: block; 
    margin: auto; 
} 

.toggleBtn p { 
    font: normal 3em Futura, sans-serif; 
    color: #029b9d; 
    cursor: pointer; 
    line-height: 8; 
    padding: 15px; 
    text-align: center; 
} 

.toggleBtn span { 
    font: normal 3em Futura, sans-serif; 
    color: #222; 
    line-height: 2.5; 
    cursor: pointer; 
    margin-bottom: 15px; 
    float: right; 
} 

.toggleBtn span:hover { 
    color: #029b9d; 
} 

.below { 
    clear:both; 
    width: 100%; 
    margin: auto; 
    overflow: hidden; 
    z-index: 9999; 
} 

.info { 
    width: 100px; 
    height: 100px; 
    font: normal 2em Futura, sans-serif; 
    background: #000; 
    position: absolute; 
    left: 3.5em; 
    top: 2em; 
    cursor: pointer; 
} 
</style> 
</head> 
<body style="width:1338px;"> 
    <div class="item advent natural"> 
     <div class="caption toggleBtn"> 
      <div class="info"></div><p>Natural Jams</p></div> 
      <div class="below"> 
       <div id="slider"> 
        <img style="background:url(images/n1.jpg)"/> 
       </div> 
      </div>  
     </div>  
    </div> 
</body>