Содержимое появляется до завершения анимации выпадающего jQuery - PullRequest
Новая
       4

Содержимое появляется до завершения анимации выпадающего jQuery

0 голосов
/ 15 мая 2011

Я использую jQuery для слайд-шоу и показа контента на моей странице после нажатия на ссылку «читать дальше». Анимация работает хорошо, но раскрываемый контент появляется сразу после щелчка по ссылке, перед анимированным слайдом. Самое смешное, что я использовал этот код на нескольких других сайтах и ​​никогда не сталкивался с этой проблемой.

Вот код: 

<script type="text/javascript">

function ShowHide(){
$(".details").animate({"height": "toggle"}, { duration: 500 });
}

</script>

и HTML 

<div class="readmore"><a href="#" onclick="ShowHide(); return false;">More Info</a></div>            
    <div class="details">
        <div class="description">
         <div class="title">Description</div>
          <p>content here</p>

         <div class="title">Subscribe</div>
         <a href="#">lorem</a><br />
         <a href="#">lorem</a>
        </div>
    </div>

Любая помощь будет отличной! Также на заметку, я могу захотеть иметь несколько экземпляров этого слайда на одной странице. Прямо сейчас щелкнув ссылку «читать дальше», вы увидите все элементы «Подробности». Как бы я сделал эту работу только на одном div без необходимости писать новый код для каждого экземпляра. Примером, где я хотел бы, чтобы это был WordPress сайт, который раскрывает детали из сообщения в списке сообщений.

1 Ответ

0 голосов
/ 15 мая 2011

Убедитесь, что для div, содержащего содержимое (в вашем случае для класса с подробностями), также установлен стиль CSS overflow: hidden.

Чтобы ответить на второй вопрос, вы можете сделать это следующим образом: 

$(document).ready(function() 
{ 
    //Bind the ShowHide function to onclick for each first link in the "readmore" div
    $('div.readmore > a').click(ShowHide);
});

function ShowHide(event)
{
    //Find the next "details" div sibling below the link container and animate it
    $(event.target).parent('div.readmore').next('div.details').animate(
        {"height": "toggle"}, { duration: 500 });
}

Также обязательно удалите встроенный обработчик «onclick», назначенный ссылке при использовании этого.

...