Слайд-эффект jQuery UI для мыши - PullRequest
Новая
       28

Слайд-эффект jQuery UI для мыши

1 голос
/ 23 января 2009

Я занимаюсь этим уже пару дней, поэтому любая помощь будет высоко ценится. У меня есть ссылка, которая содержит два элемента 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" });
    });
});

и это структура страницы (это 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>

Ответы [ 3 ]

2 голосов
/ 23 января 2009

Попробуйте что-то вроде этого. 

$(document).ready(function(){
    $(".toggle").bind("mouseenter",function(){
        $("#slide").slideDown("slow");
        $("#post-image").slideUP("slow");
    }).bind("mouseleave",function(){
        $("#slide").slideUP("slow");
        $("#post-image").slideDown("slow");});
    });
});
0 голосов
/ 18 июня 2009

Возможно, вы захотите взглянуть на плагин accordian для jquery

0 голосов
/ 23 января 2009

Спасибо, Бирк, но верхний блок скользит, чтобы частично покрыть нижний блок, поэтому мне не нужно, чтобы он выдвигался. Я попробую ваш синтаксис и посмотрю, есть ли улучшения.

- редактировать -

работал шарм. Еще раз спасибо.

...