得到以前的兄弟姐妹，手風琴效應

手風琴的右側已經開始工作，但是左側沒有。

我把我的代碼在jsFiddle

是否有人可以幫助我的左側？我一直在嘗試了好幾個小時，但它不會工作:(

的Javascript：

$(document).ready(function() { 
    $('.middle').hover(function() { 
     $(this).siblings().stop().animate({ 
      opacity: 1 
     }, 200); 
    }, 

    function() { 
     $(this).siblings().stop().animate({ 
      opacity: 0 
     }, 200); 
    }); 
});

來源

2013-06-20 Ilona Kater

似乎是工作的罰款對我來說，你是什麼意思左邊一個心不是？ – dezman

似乎爲我工作（Win7 FF21） –

試着增加動畫的時間，我認爲左邊的那個先發生，所以速度更快，而且你沒有真正看到淡入淡出，也許這是由於某種緩解？如果是這樣，你可能需要進入一個更詳細的解決方案，比如分別對左側和右側進行動畫製作。 – Leite

右邊消失的原因，左邊不是因爲你正在向右側跨度應用CSS過渡。

您可以輕鬆地將相同的過渡解決這<span>標籤：

.squares span { 
    transition-property:opacity; 
    transition-duration:1s; 
    transition-delay:0.1s; 
}

事實上，你可以凝聚你的代碼，使其更易於整體調整通過在多個時間段重複的款式組合成單定義。

例如：

.squares span { 
    opacity: 0; 
    float: left; 
    width: 139px; 
    height: 138px; 
    transition-property:opacity; 
    transition-duration:1s; 
    transition-delay:0.7s; 
} 

span.middle { 
    background:#0f0; 
    opacity: 1; 
} 

span.left1, 
span.right1 { 
    background:#00F; 
    transition-delay:0.1s; 
} 
span.left2, 
span.right2 { 
    background:#0FF; 
    transition-delay:0.3s; 
} 
span.left3, 
span.right3 { 
    background:#0F0; 
    transition-delay:0.5s; 
} 
span.left4, 
span.right4 { 
    background:#FF0; 
    transition-delay:0.7s; 
}

看到這裏的工作示例：http://jsfiddle.net/uBBZ2/14/

來源

2013-06-20 15:55:41 Axel

這更好，謝謝！ :) –

在你的CSS，你在右側塊設置的過渡性和過渡期的設置，但不左邊的那個。如果你對它們進行評論，那麼兩個轉換過程都會很快發生，同時也會發生。如果添加鏡像到左側的設置，它們都會發生得更慢。

來源

2013-06-20 15:52:06

Omg我完全忘了！它現在工作，謝謝！ –

得到以前的兄弟姐妹，手風琴效應

回答

相關問題