原始工作 CSS 悬停动画不工作 - 仅限 Chrome

Question

请注意，这在几周前对我有用，但它停止了工作。我不知道 Chrome 最近的更新是否破坏了此代码。

我有一个悬停动画，当您将鼠标悬停在“免费试用”上时，其余的 div 会平滑地滑入视图，当用户停止悬停时，还有另一个幻灯片效果隐藏了大部分 div。最终，我试图在悬停生效时显示一个按钮，但是当鼠标从#trial div 移开时隐藏它。

问题不在于它根本不起作用。问题是当用户第一次将其悬停时，效果不起作用/过渡持续时间不起作用。第一次悬停被跳过，然后所有悬停在该工作之后。

这是几周前的工作。 Chrome 的新更新是否会导致此问题发生？我在 Internet Explorer 中对此进行了测试，但它似乎不起作用。请使用 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 过渡和缓进出等。

Answer 3

好吧，您似乎是同时使用 css3 和 jquery 完成工作的。您可以仅使用 css 或仅使用 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 中使用的样式规则。这将使您能够更好地维护您的代码。 我希望它有用。