Анимировать изменение высоты в div на клик другого div

Я искал это по всему стеку переполнения, нашел много ответов, но никто не работает с тем, что я специально собираюсь ... в основном я понятия не имею, почему этот код не работает кто-то, пожалуйста, помогите! Любой вход очень ценится, спасибо!Анимировать изменение высоты в div на клик другого div

Вот HTML с div щелкать с id из elementTop и div быть показано с анимационной высотой elementBottom

<div id="elementTop" onclick="toggle_visibility('elementBottom');" > 
    <img id="thumb" src="images/davey1.png" /> 
    <a>davey blair</a> 
</div> 

<div id="elementBottom"> 
    <p><span style="font-weight: bold;">age: </span>29</p> 
    <p><span style="font-weight: bold;">hometown: </span>Charleston,SC</p> 
    <p><span style="font-weight: bold;">regular or goofy: </span>Regular</p>             
    <p><span style="font-weight: bold;">years shredding: </span>lifetime</p> 
    <p><span style="font-weight: bold;">other sponsors: </span>naish, chucktown</p> 
    <p><span style="font-weight: bold;">favorite trick: </span>switch mobe</p> 
    <p><span style="font-weight: bold;">favorite place to shred: </span>with my homies</p> 
    <p><span style="font-weight: bold;">music preference: </span>all music</p> 
    <p><span style="font-weight: bold;">paper or plastic: </span>hands</p> 
    <p><span style="font-weight: bold;">cat or dog: </span>dogs</p> 
    <p><span style="font-weight: bold;">other hobbies: </span>living life. work to live never live to work, live life.</p> 
</div>

А вот JavaScript/JQuery Я использую и линия JavaScript Я прокомментировал работу, однако jQuery, который не комментируется, не работает.

function toggle_visibility(id) { 
    var e = document.getElementById(id); 
    if(e.style.height == 'auto') { 
    // e.style.height = '0px'; 
    $('#' + e).animate({height:'0px'}); 
    } else { 
    // e.style.height = 'auto'; 
    $('#' + e).animate({height:'auto'}); 
    } 
}

источник

2013-08-13 swiper192

Вы не можете анимировать на «авто» –

попытался анимировать в 500px ... до сих пор не работает :( – swiper192

импортировать библиотеку JQuery ли? '<Сценарий SRC =" // Аякса. googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js ">' –

Это работает, но вы никогда не можете анимированный его обратно, потому что вы не можете щелкнуть на элементе, когда он 0px высоко:

http://jsfiddle.net/neuroflux/UYZY2/23/

SNIP!

function toggle_visibility(id) { 
    $(id).stop().animate({height:'toggle'}, 500); 
} 

$('.clicker').on('click', function() { 
    toggle_visibility('#' + $(this).attr('name')); 
});

источник

2013-08-13 15:30:14

Мне это очень нравится, и это Удивительно, что это работает. Я попытаюсь использовать ваши идеи в своей проблеме, но, в частности, я хочу, чтобы пользователь щелкнул элемент div elementTop и переключил элементBottom на скрытый d, показанное анимацией высоты – swiper192

Вы также можете изменить свойство height на 'toggle' вместо пикселей. Сокращает код: http://jsfiddle.net/876R9/ – Novocaine

Обновлено снова с предложением @ Novocaine88;) –

Немного странно, что вы используете jQuery, а иногда нет. Используйте

var e = $('#' + id);

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

e.animate();

источник

2013-08-13 15:32:06 Brett

Анимировать изменение высоты в div на клик другого div

ответ

Смежные вопросы