Высота анимации родительских шкур Выбор параметров - PullRequest
Новая
       23

Высота анимации родительских шкур Выбор параметров

1 голос
/ 15 января 2010

Когда я фокусируюсь на окне выбора, я хочу, чтобы появилась скрытая подсказка. Когда я нажимаю на поле выбора, начинается анимация, но список опций скрыт. Как мне обойти это? 

<style>
.showme {display:none;}
li {height:25px;background:red; }
select{z-index:100;}
p{margin:0px;padding:0px;}
</style>
<script type="application/javascript">
$(document).ready(function() {

    $("select")
        .focus(function(){
            var myParent = $(this).parent("li");
            var myInfo = $(this).siblings(".showme");

            $(myParent).data("myoldheight", $(myParent).height());

            $(myInfo).css("display","block");                               
            var totalHeight = $(myParent).height() + $(myInfo).height();

            $(myParent).animate({
                "height": totalHeight + "px"                               
            },3000,function() {console.log("animated");})               
        })

        .blur(function() {

            $($(this).parent("li")).animate({
                "height": $(this).parent("li").data("myoldheight") + "px"                              
            },500) 

            $(this).siblings(".showme").hide();
        })
        })
</script>
<form>
<ul>
<li>
<label for="test">Test</label>
<select id="test" name="test">
    <option value=""></option>
    <option value="a">a</option>
    <option value="b">b</option>
</select>
<p class="showme">This is my text</p>    
</li>
</ul>
</form>

1 Ответ

0 голосов
/ 19 января 2010

Я думаю, что вы подходите к проблеме / разметке неправильно. Попробуйте немного сегментировать структуру, чтобы не анимировать родительский элемент. Например:

HTML: 

<select id="selSomething">
    <option value="1">1</option>
    <option value="2">2</option>
</select>
<div class="tooltip">More information!</div>

Javascript: 

 $(document).ready(function() {
      $('#selSomething').focus(function() {
          var $tip = $(this).next('.tooltip');
          if($tip.length > 0) {
            $tip.slideDown();
          }
      });
      $('#selSomething').blur(function() {
          var $tip = $(this).next('.tooltip');
          if($tip.length > 0) {
            $tip.slideUp();
          }
      })
  });

Помните, простота - это совершенство:)

...