jQuery наведите курсор на слайд? - PullRequest
Новая
       27

jQuery наведите курсор на слайд?

3 голосов
/ 14 октября 2011

Проверьте дно для исправленного издания

Хорошо, вот проблема.У меня есть li с div внутри, и я пытаюсь навести li, чтобы заставить div скользить вверх.

Вот HTML: 

<li id="one">
    <div>
        <h4>title</h4>
        <p>description</p>
    </div>
</li>

Прямо сейчас у меня есть это в моем CSS: 

#one div { display: none; }

И это для моего JS: 

$(document).ready(function() {

    $('#one').hover(function() {
        $('#one > div').css({ display : 'block' });
    });

});

Я знаю, что мог бы просто использовать CSS psuedo :hover, чтобы заставить его всплыть, но я подумал, что если я захочу получить эффект слайда, то я мог бы также сделать все это в JS.Первая проблема - это не работает:Как только я заставляю его просто появляться, я хочу добавить к нему эффект слайда, и я не уверен, что это правильный способ сделать это.

Спасибо, ребята / gals

исправлено

Новый JavaScript 

$(document).ready(function() {

    $('#one').hover(function () {
        $('#one > div').slideToggle();
    });

});

Это работает!Хотя он спускается сверху, и я планировал поднять его снизу.

Ответы [ 5 ]

4 голосов
/ 14 октября 2011

Часть проблемы заключается в том, что slideUp() в jQuery скрывает выбор, а slideDown() показывает выбор.Чтобы элемент был перемещен в поле зрения, вам нужно сделать свой собственный .animate(). 

CSS:
  #one {
    overflow: hidden;
    position: relative;
    border: 1px solid gray;
    height: 40px;
  }

  #one div { 
    position: absolute;
    bottom: -100%;
  }

jQuery:
  $('#one').hover(
    function() {
        $(this).find('div').animate({
            bottom: '0%'
        }, 'fast' );
    },function() {
        $(this).find('div').animate({
            bottom: '-100%'
        },'fast');
    }
  );

jsFiddle: http://jsfiddle.net/blineberry/mrzqK/

2 голосов
/ 14 октября 2011

как насчет использования jQuery slideUp или fadeIn?

http://api.jquery.com/slideToggle/

http://api.jquery.com/slideDown/

http://api.jquery.com/slideUp/

Этот код работает для меня. 

$(document).ready(function () {

    $('#one').hover(function () {
        $('#one > div').slideDown();
    });

});

Нужно немного подправить, чтобы он выглядел красиво, но он скользит вниз.

1020 * редактировать *

Вот сайт, описывающий, как использовать animate, чтобы делать то, что вы хотите.

http://www.learningjquery.com/2009/02/slide-elements-in-different-directions

1 голос
/ 14 октября 2011 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <style>#one div { display: none; }</style>
<head>
  <title></title>
</head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
   <script>
   $(document).ready(function() {

    $('#one').hover(function() {

      $("#one").find("div").slideDown("slow");
    });
    $('#one').mouseout(function() {

      $("#one").find("div").slideUp("slow");
    });
});
</script>

<body>
<div>
    <li id="one">
    <div>
        <h4>title</h4>
        <p>description</p>
    </div>
</li>
  </div>
</body>

</html>

ПОПРОБУЙТЕ

1 голос
/ 14 октября 2011

во-первых, вам нужно создать min-width и min-height или что-то еще, потому что li в данный момент нечего парить (просто для того, чтобы li присутствовал, поместите на него красную рамку, и вы увидите, чтоЯ говорю о.)

во-вторых, я думаю, что вы хотите slideDown () ... я думаю, что slideUp () сделает его исчезающим, верно?

Я добавил цвет bg для демонстрационных целей.

слышит небольшую демонстрацию: http://jsfiddle.net/R9A3G/

Если вы ищете конкретную анимацию, вам, возможно, придется выполнить некоторые трюки css вместе с jquery .animate ().

1 голос
/ 14 октября 2011

вы можете сделать что-то вроде этого

$ (div) .show ("слайд", {направление: "вниз"}, 1000)

или даже свойство animate может решить ваши проблемы

больше здесь

http://docs.jquery.com/UI/Effects/Slide api.jquery.com/animate/

...