Функция slideDown() ведет себя странно

Во-первых, я должен сказать, что я довольно новичок в разработке веб-сайтов и преподаю себя через учебные пособия и этот сайт и т. Д. ... Я пытаюсь получить видео, отображаемое в этом проекте, с приятным плавным скольжением вниз (и для скрытия), как объяснено на этой странице: https://www.tutorialspoint.com/jquery/effect-slidedown.htm В конце есть еще одна демонстрация, в которой она отлично работает так же, как и моя. Но вот то, что я получаю, когда я пытаюсь это:Функция slideDown() ведет себя странно

Вот мой код:

HTML:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>Test1</title> 
    <link rel="stylesheet" type="text/css" href="styles.css"> 
    <script type="text/javascript" src="jquery.js"></script> 
    <script src="script.js" type="text/javascript"></script> 
</head> 
<body> 
    <div id="wrap"> 

    <p>Nullam dictum felis<span id="test">Some text</span> <video id="videoTest" width="350" controls><source src="mickey.mp4" type="video/mp4"></video> 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> 

</div> 
</body> 
</html>

JavaScript:

$(document).ready(function(){ 

    $("#test").click(function(){ 
     if ($("#videoTest").css("display") == 'none') { 

      $("#videoTest").slideDown("slow"); 
      $("#videoTest").css("display", "inline"); 

     } else { 

      $("#videoTest").slideUp("slow"); 
      $("#videoTest").css("display", "none"); 
     } 
    }) 
});

CSS:

#wrap{ 
    margin: 100px auto; 
    width: 350px; 
} 

p { 
    line-height: 2em; 
} 

#test{ 
    color: blue; 
    cursor: pointer;  
} 

#videoTest{ 
    display: none; 
}

Я отрезал часть текста для Stack OverFlow, но остальная часть кода такая же. Моя проблема, конечно, в том, что видео не просто скользит вниз, оно также скользит по горизонтали, что я не хочу, и элементы управления отображаются сразу, с которыми я могу жить, но в идеале я бы этого не хотел. Кроме того, функция slideUp не работает вообще. Любая помощь оценивается. P

--------------------------------------------- -------------РЕДАКТИРОВАТЬ------------------------------------ ---------------------------

Я попытался обернуть видео в div и применить метод slideDown() к div вместо самого видео, и это решило обе проблемы (нежелательное горизонтальное скольжение и тот факт, что он не работал с SlideUpp), но, к сожалению, он работает очень беспорядочно, только срабатывая при некотором щелчке, я бы сказал один раз из пяти.

источник

2016-10-26 Paul

Функция работает прекрасно. Просто вы используете эффект слайда для рендеринга видеопроигрывателя, в отличие от простого изображения в учебнике. Видеопроигрыватель предназначен для отображения элементов управления сначала, а затем появляется часть видео. Попробуйте поэкспериментировать с элементом 'height' элемента видео, чтобы увидеть, что я говорю. –

Итак, есть ли способ сделать то, что я хочу с видео? - Я имею в виду, что я не хочу, чтобы горизонтальное скольжение – Paul

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

Так HTML будет выглядеть примерно так:

<p>Nullam dictum felis 
    <span id="test">Some text</span> 
    <span class="wrapVideo"> 
     <video id="videoTest" width="350" height="200" autoplay> 
      <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4"> 
     </video> 
    </span> 
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
</p>

CSS:

.wrapVideo { 
    height: 200px; 
    display: none; 
}

JS - я изменил его на slideToggle, и прекратил менять класс на видео: EDIT играть/пауза на слайде или слайде

$(document).ready(function(){ 
    $("#test").click(function(){ 
     if($(".wrapVideo").css("display") == 'none') { 
      $(".wrapVideo").slideDown("slow"); 
      $("#videoTest").get(0).play(); 
     } else { 
      $(".wrapVideo").slideUp("slow"); 
      $("#videoTest").get(0).pause(); 
     } 
    }) 
});

BONUS: удалив атрибут управления из видеоэлемента, элементы управления больше не отображаются, и добавление атрибута автовоспроизведения позволяет видео начать воспроизведение без элементов управления.

Here is a working codepen.

источник

2016-10-26 16:59:38

это здорово, и оно отлично подходит для одной мелочи. Когда страница загружается в первый раз, когда воспроизводится видео, я предполагаю, что из-за «автовоспроизведения» – Paul

Если вы этого не хотите, вы можете удалить «автовоспроизведение», а затем просто использовать функцию .play(), чтобы запустить video –

Привет, да, мне удалось разобраться в этом (шокирующий ужас). Есть ли способ сделать анимацию более гладкой, она немного отрывистая. Спасибо за ur time – Paul

пожалуйста, проверьте скрипку, расположенный на https://jsfiddle.net/c16kpve6/

<button id='slideDown'>slide down</button> 
<div id='container'> 
    <img src="https://peach.blender.org/wp-content/uploads/dl_vim.jpg?x11217" alt=""> 
    <video src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4"></video> 
</div>

CSS

#container { 
    height: 180px; 
    width: 320px; 
    position: relative; 
    display:none; 
} 
#container img { 
    position: absolute; 
    height: 180px; 
    width: 320px; 
    left:0; 
    right:0; 
    z-order: -1; 
    float: left; 
} 

#container video { 
    position: absolute; 
    height: 180px; 
    width: 320px; 
    left:0; 
    right:0; 
    float: left; 
    display: none; 
}

$('#slideDown').on('click', function() { 
    $('#container').slideDown(function(){ 
    $('video').show(); 
    }) 
})

источник

2016-10-26 17:04:35

Функция slideDown() ведет себя странно

ответ

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