माउसइंटर पर jQuery यूआई स्लाइड प्रभाव - jquery, उपयोगकर्ता इंटरफ़ेस, प्रभाव, स्लाइड, माउसenter

मैं कुछ दिनों के लिए इस पर रहा हूँ, इसलिएकोई भी सहायताकाफी प्रशंसनीय होगी। मुझे एक लिंक मिला है जिसमें दो div एक दूसरे के ऊपर बैठे हैं। शीर्ष div छिपा हुआ है, लेकिन आंशिक रूप से नीचे के div को कवर करने के लिए स्लाइड mouseenter, और फिर से फिर से बाहर mouseleave। यह एक हद तक काम कर रहा है, लेकिन थोड़ा छोटा है। यह वही है जो मेरे पास jQuery के लिए है (जिसे मैंने डेमो और प्रलेखन से एक साथ जोड़ा है):

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

और यह पृष्ठ संरचना है (यह एक वर्डप्रेस पेज है)

<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="/images/<?php post_image("", false, false); ?>" width="275" height="155" />
</div>
</a>
</div>

उत्तर:

इस तरह कुछ कोशिश करो।

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

धन्यवाद बिर्क, लेकिन शीर्ष डिव में आंशिक रूप से नीचे के डिव को कवर करने के लिए स्लाइड करता है, इसलिए मुझे इसे बाहर स्लाइड करने की आवश्यकता नहीं है। मैं आपके सिंटैक्स की कोशिश करूंगा और देखूंगा कि कोई सुधार हुआ है या नहीं।

- संपादित करें -

एक आकर्षण काम किया। एक बार फिर धन्यवाद।

तुम भी jquery के लिए समझौते के प्लगइन पर एक नज़र रखना चाहते हो सकता है