鼠標中心上的jQuery UI滑動效果

我已經在這裏待了好幾天了，所以任何幫助都會非常感謝。我有一個鏈接，其中包含兩個坐在彼此頂部的div。頂部div隱藏，但滑入部分覆蓋mouseenter的底部div，然後再次出現mouseleave。它在一定程度上工作，但有點bug。這就是我對jQuery的（我已經從演示和文檔拼湊起來）：鼠標中心上的jQuery UI滑動效果

$(document).ready(function(){ 
    $(".toggle").bind("mouseenter",function(){ 
     $("> :eq(0)", this).show("slide", { direction: "down" }); 
    }).bind("mouseleave",function(){ 
     $("> :eq(0)", this).hide("slide", { direction: "down" }); 
    }); 
});

，這是頁面結構（這是一個WordPress頁面）

<div <?php post_class() ?> id="post-<?php the_ID(); ?>"> 
    <a href="<?php the_permalink(); ?>" class="toggle"> 
    <div id="slide" class="post-info" style="display: none;"> 
     <h1><?php the_title(); ?></h1> 
     <ul> 
     <li>more info here</li> 
     <li>more info here</li> 
     </ul> 
    </div> 
    <div class="post-image"> 
     <img src="<?php post_image('', false, false); ?>" width="275" height="155" /> 
    </div> 
    </a> 
</div>

來源

2009-01-23 Aaron Moodie

你的問題是什麼？ – Soviut 2009-01-23 02:34:00

嘗試像這樣的東西。

$(document).ready(function(){ 
    $(".toggle").bind("mouseenter",function(){ 
     $("#slide").slideDown("slow"); 
     $("#post-image").slideUP("slow"); 
    }).bind("mouseleave",function(){ 
     $("#slide").slideUP("slow"); 
     $("#post-image").slideDown("slow");}); 
    }); 
});

來源

2009-01-23 02:42:47 Birk

感謝Birk，但頂級div滑入部分覆蓋底部div，所以我不需要它滑出。我會嘗試你的語法，看看是否有任何改進。

- 編輯 -

工作的魅力。再次感謝。

來源

2009-01-23 02:51:37

你可能也想看看jQuery的手風琴插件

來源

2009-06-18 18:43:16 jcuenod

鼠標中心上的jQuery UI滑動效果

回答

相關問題