Question

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

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

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

这是几周前的工作。 Chrome的新更新是否会导致此问题发生？我在Internet Explorer中对此进行了测试，但似乎没有用。请使用Chrome来测试小提琴：

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或仅使用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中使用的样式规则。这样可以更好地维护代码。我希望它有用。

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

4 个答案: