マウスオーバー時にスライディングパネルが振動する

Question

HTMLとjQueryでdivコンテナを作成しました。ここにマウスを置くと別のパネルが上にスライドします。しかし、私はスライディングパネル "ヨーヨー"を体験しています。これは、パネルが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