只交換圖片

Question

問題是，我創建了我的WordPress主題，用戶將鼠標懸停在帖子鏈接上，然後鏈接功能img將滑入並滑出。創建帖子的代碼，這裏是生成的內容。問題是，我創建的轉換jQuery代碼不是動畫圖像的滑動條，它正在正確地添加刪除「selected」類。感謝您的幫助

這是我的包裝

<div id="blog-posts"> 


</div> 

裏面是哪裏的職位去。

<div id="blog-posts"> 
    <div class="posts-slider selected">          
    <img width="600" height="156" alt="angularjs" class="attachment-post-thumbnail wp-post-image sel-img" src="http://designsbycamaron.net/wp-content/uploads/2013/07/angularjs.png">      
<div class="slider-content"> 
    <ul>         
    <li><a href="http://designsbycamaron.net/2013/07/new-framework-knowledge/">           
    New Framework Knowledge 
    </a> 
    </li> 
    <li><p>I have been really careful to not add Frameworks that I am not familiar with or have not used extensively</p> 
    </li> 
    </ul> 
    </div> 
    </div> 
</div> 

這裏是CSS

div.selected img { 
    display: block; 
    height: auto; 
    position: absolute; 
    } 

    .slider-content { 
    clear: both; 
    float: right; 
    padding-right: 20px; 
    text-align: right; 
    width: 350px; 
    } 

這裏是我的jQuery是該做的過渡。

$('.posts-slider a').mouseover(function(){ 
$(this).parents('.posts-slider img').slideToggle().siblings('.selected img').slideToggle('slow'); 
    $(this).parents('.posts-slider').addClass('selected').siblings('.selected').removeClass('selected'); 
}); 

您可以在my website上看到此現場版本。

我覺得這很簡單。

Answer 1

首先，HTML的佈局並不真正有助於簡單的解決方案，但是 - 這應該可行。更換你的鼠標懸停功能是這樣的：

$('.posts-slider a').mouseover(function(){ 
     var wrapper = $(this).closest('.posts-slider'); 
     var image = $('img', wrapper); 
     $('.posts-slider img').not(image).slideUp(); 
     image.slideDown(); 
     $('.posts-slider').removeClass('selected').filter(wrapper).addClass('selected'); 
}); 

和更換你的CSS，使所有圖像position:absolute，不只是一個.selected父母的人。