原始的工作CSS懸停動畫不工作 - 僅限於光線

Question

請注意，這是幾個星期前我工作，但它停止工作。我不知道Chrome最近的更新是否打破了這個代碼。

我有一個懸停動畫，當你將鼠標懸停在「免費試用」上時，其餘的div平滑地滑入視圖中，當用戶停止懸停時，隱藏大多數div的另一個幻燈片效果。最終，我試圖在懸停生效時顯示一個按鈕，但在將鼠標從#trial div中取出時將其隱藏。

問題不在於它根本不起作用。問題在於用戶徘徊時第一次效果沒有緩解/過渡時間不起作用。第一次懸停跳過後，所有工作後盤旋。

這是幾個星期前的工作。 Chrome的新更新是否會導致此問題發生？我在互聯網瀏覽器中測試了它，它似乎沒有工作。請使用Chrome測試出小提琴：

JSFIDDLE FOR CHROME ONLY

HTML：

<div id="trial" style="position:fixed; right:0; top:80px; z-index:999; display:inline;vertical-align:middle;"> 
      <h1 style="display:inline-block;vertical-align:middle; width:80px;padding-right:30px;">Free Trial!</h1> 
      <p style="display:inline-block; width:300px;vertical-align:middle;">Download the free trial for a 
       taste of what our powerful 
       software can do!<br><a href="google.com"><button style="padding:0.5em 0.5em;font-weight:bold;text-align:center;margin-left:75px;margin-top:10px;">DOWNLOAD</button></a> 
      </p> 
     </div> 

的JavaScript：

$(document).ready(function(){ 
    $('#trial').hide(); 
    $('#trial').delay(500).show('slide',{direction:'right'},500); 
    $("#trial").hover(function(){ 
    $("#trial").css("transition","all .5s ease-in-out"); 
    },function(){ 
    $("#trial").css("transition","all .5s ease-in-out"); 
    }); 
}); 

CSS：

#trial{ 
    -webkit-transform:translateX(300px); 
    -ms-transform:translateX(300px); 
    -moz-transform:translateX(300px); 
    background: darkred; 
    padding-left:30px; 
    font-size:80%; 
    color:white; 
    cursor:pointer; 
    border-top-left-radius:5px; 
    border-bottom-left-radius:5px; 
} 

#trial:hover{ 
    -ms-transform:translateX(0px); 
    -moz-transform:translateX(0px); 
    -webkit-transform:translateX(0px); 
    -ms-transition: all 400ms ease-in-out; 
    -moz-transition: all 400 ms ease-in-out; 
    -webkit-transition: all 400ms ease-in-out; 
    -webkit-transition-property: anything; 
} 

#trial button{ 
    cursor:pointer; 
    -webkit-transition: all 100ms ease-in-out; 
} 

Answer 1

沒有必要使用jQuery，你只能在CSS3做到這一點：

#trial{ 
    -webkit-transform:translateX(300px); 
    -ms-transform:translateX(300px); 
    -moz-transform:translateX(300px); 
    background: darkred; 
    padding-left:30px; 
    font-size:80%; 
    color:white; 
    cursor:pointer; 
    border-top-left-radius:5px; 
    border-bottom-left-radius:5px; 

    transition: all 0.5s ease-in-out; 
    -ms-transition: all 400ms ease-in-out; 
    -moz-transition: all 400 ms ease-in-out; 
    -webkit-transition: all 400ms ease-in-out; 
} 


#trial:hover { 
    -ms-transform:translateX(0px); 
    -moz-transform:translateX(0px); 
    -webkit-transform:translateX(0px); 
} 

JSFiddle Demo。

Answer 2

嘗試使用負邊距值而不是translatex來隱藏部分div。然後使用css3轉換margin-with-ease-out-out等。

Answer 3

好吧，你似乎在用css3和jquery一起工作。你可以只使用CSS或只有usig jQuery來做到這一點。

$(document).ready(function() { 
     $('#trial').hide().delay(500).show('slide', { 
      direction: 'right' 
     }, 500) 
      .mouseenter(function() { 
      $(this).animate({ 
       right: "+=300" 
      }, 400); 
     }).mouseleave(function() { 
      $(this).animate({ 
       right: "-=300" 
      }, 400); 
     }); 
    }); 

here i fixed your fiddle。並儘量避免內聯樣式爲你的元素提供一些類名，當你需要改變某些東西時你會更高興。

Answer 4

從#trial div中刪除樣式並使用此CSS。 刪除所有JavaScript代碼......在這種情況下不使用:)

與更改CSS：

#trial { 
    position: absolute; 
    z-index:999; 
    top:80px; 
    right:-320px; 
    background: darkred; 
    padding-left:30px; 
    font-size:80%; 
    color:white; 
    cursor:pointer; 
    border-top-left-radius:5px; 
    border-bottom-left-radius:5px; 
    -moz-transition: all 0.5s ease-in-out; 
    -o-transition: all 0.5s ease-in-out; 
    -webkit-transition: all 0.5s ease-in-out; 
    transition: all 0.5s ease-in-out; 
    } 

    #trial:hover{ 
    right: 0; 
    } 

在一般情況下，你應該將樣式表在HTML中使用的樣式規則。這將使您可以更好地維護您的代碼。 我希望它很有用。