jQuery動畫互相取消？

HundleyDeveloping.com/work/jQuery動畫互相取消？

由於某種原因，如果我通過鼠標滑過播放一個動畫，它工作正常，但直到我刷新其他動畫時纔會播放。

jQuery的

$(".image-container").hover( 
    function() { 
     $(".image").animate({ height: "400", width: "574"}, "fast"); 
     $(".image").css("z-index", "2"); 
     $(".image-container-two").css("z-index", "1"); 
     $(".caption").stop().fadeOut("fast"); 
    }, function() { 
     $(".image").animate({ height: "200", width: "287"}, "fast"); 
     $(".image").css("z-index", "0"); 
     $(".image-container-two").css("z-index", "0"); 
     $(".caption").fadeIn("fast");  
     } 
); 

$(".image-container-two").hover(
    function() { 
     $(".image-two").animate({ height: "400", width: "462"}, "fast"); 
     $(".image-two").css("z-index", "2"); 
     $(".image-container").css("z-index", "1"); 
     $(".caption-two").fadeOut("fast"); 
    }, function() { 
     $(".image-two").animate({ height: "200", width: "231"}, "fast"); 
     $(".image-two").css("z-index", "0"); 
     $(".image-container").css("z-index", "0"); 
     $(".caption-two").fadeIn("fast");   
     } 
);

CSS

.image-container { 

    text-align: center; 
    position: absolute; 
    border: 3px outset #666666; 
    background-color: #ffffff; 
    z-index: 2; 

} 

.image-container-two { 

    text-align: center; 
    position: absolute; 
    border: 3px outset #666666; 
    background-color: #ffffff; 
    left: 325px; 
    z-index: 1; 

} 

.image { 

    z-index: inheit; 
    width: 287px; 
    height: 200px; 
    margin: 5px; 
    margin-right: 3px; 

} 

.image-two { 

    z-index: inheit; 
    width: 231px; 
    height: 200px; 
    margin: 5px; 
    margin-right: 3px; 

} 

.caption { 

    z-index: inherit; 
    background-color: #000000; 
    width: 287px; 
    height: 30px; 
    opacity:0.7; 
    filter:alpha(opacity=70); 
    margin: 5px; 
    margin-top: -40px; 
    color: #ffffff; 
    display: block; 
    font-family: Perpetua, Baskerville, "Big Caslon", "Palatino Linotype", Palatino, "URW Palladio L", "Nimbus Roman No9 L", serif; 
    font-size: 20px; 
    word-wrap: break-word; 
    line-height: 30px; 

} 

.caption-two { 

    z-index: inherit; 
    background-color: #000000; 
    width: 231px; 
    height: 30px; 
    opacity:0.7; 
    filter:alpha(opacity=70); 
    margin: 5px; 
    margin-top: -40px; 
    color: #ffffff; 
    display: block; 
    font-family: Perpetua, Baskerville, "Big Caslon", "Palatino Linotype", Palatino,  "URW Palladio L", "Nimbus Roman No9 L", serif; 
    font-size: 20px; 
    word-wrap: break-word; 
    line-height: 30px; 

}

HTML

<div class="image-container"> 
         <img src="../images/templateone.jpg" class="image" alt=""/> 
         <br /> 
         <span class="caption">Template #1</span> 
        </div> 
        <div class="image-container-two"> 
         <img src="../images/templatetwo.jpg" class="image-two" alt=""/> 
         <br /> 
         <span class="caption-two">Template #2</span> 
        </div>

請幫助！無法弄清楚爲什麼這些元素似乎是彼此「嫉妒」。

來源

2013-07-05 Allenph

什麼是「其他」動畫？來自其他圖像的動畫或handlerOut（「懸停」函數的第二個函數）中的函數？ – putvande

如果我在一個圖像上播放動畫，我可以將鼠標放在關閉位置，並根據需要多次重複該動畫，但僅限於該圖像。在其中一個圖像上運行動畫之後，其他圖像動畫不會在懸停時啓動。 – Allenph

他們似乎在這裏工作得很好：http://jsfiddle.net/gYQw7/ – nnnnnn

把它弄出來，z-index的東西搞得一團糟。我只是刪除動畫中與z-index有關的所有內容，並且它工作正常。謝謝你們，歡呼！

來源

2013-07-05 09:51:58 Allenph

jQuery動畫互相取消？

回答

相關問題