滑動面板在鼠標懸停時擺動

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