0

WordPress ページで JQuery を使用して、mouseenter イベントで非表示の要素をアニメーション化しています。hidden 要素は、画像のサムネイルを含む div にマウスが入ると下にスライドするテキスト ブロックです。私はアニメーションを機能させていますが、非表示の要素が下にスライドすると、要素をスライドアップして望ましくないヨーヨー効果を与えるマウスリーブ機能がトリガーされます。マウスが実際にサムネイルを持つ要素を離れない限り、mouseleave関数が呼び出されないように、下にスライドする要素を無視するようにJQueryに指示する方法を知っている人はいますか? 結果はここで見ることができます：

http://jeremypiller.com/wordpress

どんな助けでも大歓迎です。

これがCSSです（WordPressで生成されたクラスを操作しています）：

.wp-caption { 
    position:relative;
    width:150px;
    height:150px;
    color:#000;
    text-align:center; 
 }

.wp-caption img {
            position:absolute;
            width:150px;
            left:0px;
            top:0px;
 }


  .wp-caption p.wp-caption-text {
            font-size: 1em;
            line-height: 17px;
            width:150px;
                background-color:#fff;
            display:none;
            cursor:pointer; 
            margin:0;
            height:100px;
            position:absolute;
            left:0px;
            top:0px;
                opacity:0.8;
}

HTML:

<div id="attachment_61" class="wp-caption alignnone" style="width: 160px">
<a rel="lightbox[roadtrip2]" href="http://jeremypiller.com/wordpress/wp-content/uploads/2011/01/enlarge_water.jpg">
<img class="size-thumbnail wp-image-61" title="enlarge_water" src="http://jeremypiller.com/wordpress/wp-content/uploads/2011/01/enlarge_water-150x150.jpg" alt="" width="150" height="150" />
</a>
<p class="wp-caption-text">Is this where the wp-caption gets added?</p>
</div>

そしてJQuery：

jQuery(document).ready(function(){
     $(".wp-caption").each(function () {
    var $this = jQuery(this);

            jQuery(".wp-caption-text").hide();

    jQuery("img.size-thumbnail", $this).stop().mouseenter(function () {
    jQuery(".wp-caption-text", $this).slideDown('slow');
    }).mouseleave(function () {
            jQuery(".wp-caption-text", $this).slideUp('slow');
        });
        });
        });
4

2 に答える 2

1

mouseleave イベントの代わりに、本体に関連付けられた新しい mouseenter イベントにします。画像と下のテキストの両方からこのイベントが発生しないようにします。event.stopPropagation() メソッドでバブリングを停止できます。

http://api.jquery.com/event.stopPropagation/

于 2011-01-25T21:47:43.570 に答える
0

ハロルドの方法は私のコメントどおりに機能しませんでしたが、mouseleave イベントは必ずしも mouseenter イベントをトリガーした同じ要素に関連付ける必要はないと考えさせられました。以下は、期待どおりに動作している JQuery コードです。

jQuery(document).ready(function(){
    jQuery(".wp-caption").each(function () {
    var $this = jQuery(this);

            jQuery(".wp-caption-text").hide();

    jQuery("img.size-thumbnail", $this).stop().mouseenter(function () {
    jQuery(".wp-caption-text", $this).slideDown('slow');
    });
    });
    });

jQuery(document).ready(function(){
    jQuery(".wp-caption").each(function () {
    var $this = jQuery(this);

    jQuery(".wp-caption.alignnone").stop().mouseleave(function () {
    jQuery(".wp-caption-text", $this).slideUp('slow');
    });
            });
            });

このコードはおそらく短縮でき、元のコードに似たものになるでしょう。

于 2011-01-27T16:03:06.480 に答える