滑动面板在鼠标悬停时摆动

Question

我已经用HTML和jQuery构建了一个div容器，当你将鼠标悬停在上面时，另一个面板滑过顶部。但我正在体验滑动面板“yoyo”。我认为这是因为当面板滑过div时，悬停状态会被触发然后丢失，因此面板会不断弹出和停止。

我想要发生的事情是，当你在面板上的任何地方盘旋时，当你不在广场时，它不会。

这里是一个小提琴，所以你可以看到问题是什么，也许这是更容易解释。

https://jsfiddle.net/xa5gtd2u/3/

而且这里是代码

HTML

<div class="container"> 
    <div class="services-blocks"> 
    <img class="alignnone size-full wp-image-1974" src="http://placehold.it/250x250" alt="Design" width="250" height="250" /> 
    <h3>title here</h3> 
    </div> 
    <div class="services-slide-panel"> 
    <h3>title here</h3> 
    Some text here 
    Some text here 
    Some text here 
    Some text here 
    </div> 
</div> 

CSS

.services-slide-panel { 

    background: #f3535e; 
    width: 100%; 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    top: 0; 
    display: none; 
    color: #ffffff; 

} 

.services-slide-panel h3 { 

    color: #ffffff; 

} 

.services-blocks h3 { 

    text-align: center; 
    position: absolute; 
    bottom: 5%; 
    width: 100%; 
    color: #ffffff; 

} 

.container { 

    width: 250px; 
    height: 250px; 
    position: relative; 
} 

jQuery的

 $(document).ready(function() { 


    $(".services-blocks").hover(function() { 

     $(this).next(".services-slide-panel").slideToggle("slow"); 

    }); 

    }); 

Answer 1

CSS3转换总是一个更好的选择来做这些类型的效果。此外，你必须hover()在.container，否则滑动的div将采取悬停，而将调用hover()函数的悬停部分。

$(document).ready(function() { 
 

 

 
    $(".container").hover(function() { 
 

 
     $(this).find(".services-slide-panel").addClass("slow"); 
 

 
    }, function() { 
 
     $(this).find(".services-slide-panel").removeClass("slow"); 
 

 
    }); 
 

 
    });

.services-slide-panel { 
 
    background: #f3535e; 
 
    width: 100%; 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: 0; 
 
    top: 110%; 
 
    color: #ffffff; 
 
    transition: all 0.3s ease; 
 
} 
 

 
.services-slide-panel.slow { 
 
    top: 0%; 
 
} 
 

 
.services-slide-panel h3 { 
 
    color: #ffffff; 
 
} 
 

 
.services-blocks h3 { 
 
    text-align: center; 
 
    position: absolute; 
 
    bottom: 5%; 
 
    width: 100%; 
 
    color: #ffffff; 
 
} 
 

 
.container { 
 
    width: 250px; 
 
    height: 250px; 
 
    position: relative; 
 
    overflow:hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="services-blocks"> 
 
    <img class="alignnone size-full wp-image-1974" src="http://placehold.it/250x250" alt="Design" width="250" height="250" /> 
 
    <h3>title here</h3> 
 
    </div> 
 
    <div class="services-slide-panel"> 
 
    <h3>title here</h3> Some text here Some text here Some text here Some text here 
 
    </div> 
 
</div>

Fiddle here